A dashboard configuration tool powered by Vue

dirk

A simple dashboard layout library powered by Vue, written at SamKnows.

You can find a demo of this here: https://samknows.github.io/dirk/

Installation

$ npm install --save dirk

Usage

To use Dirk, you need to import the Dashboard component, and then pass in a configuration object containing information on what to display in the dashboard and how to display it.

Have a play with the demo.

Each coloured block is a panel. Every panel is powered by a Vue component. For example:

<template>
  <dashboard :data="data" :component-getter="getComponent" :editing="true"></dashboard>
</template>

<script>
  import Dashboard from 'dirk';
  import MyTestPanel from './MyTestPanel.vue';

  export default {
    data: () => ({
      data: {
        type: 'horizontal',
        size: 1,
        children: [
          {
            type: 'panel',
            size: 1,
            component: 'MyTestPanel'
          }
        ]
      }
    }),
    methods: {
      getComponent(name) {
        if (name === 'MyTestPanel') {
          return MyTestPanel;
        }

        return { render: h => h('p', '404 component not found') };
      }
    },
    components: {
      Dashboard,
    }
  };
</script>

The would display the MyTestPanel component as the entire dashboard. There’s two parts to this, the data object, and the getComponent method. The data object contains blocks, which can be a panel (a component), or “vertical” or “horizontal”, which is a layout block which can contain multiple blocks laid out—you guessed it—either vertically or horizontally. The getComponent method takes the string stored in the configuration and returns an actual Vue component: the reason you can’t specify a Vue component directly in the configuration is that it makes the object a lot trickier to store in a database.

In the previous example, we simple have a horizontal block containing a panel block. We can’t have a panel block as the root block or the library won’t know what to do when we add a new block. The size attribute says how much of the space a block should take up. For example, the following configuration would display two panels - the first taking 40% of the width, and the second taking 60% of the width.

const data = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel'
    },
    {
      type: 'panel',
      size: 0.6,
      component: 'MyOtherTestPanel'
    }
  ]
};

It’s also possible to pass in configuration, using the meta attribute:

const data = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel',
      meta: {
        color: 'red'
      }
    },
    {
      type: 'panel',
      size: 0.6,
      component: 'MyOtherTestPanel',
      meta: {
        color: 'blue'
      }
    }
  ]
};

The contents of the meta object will be passed into the component as props—effectively, <MyTestPanel color="red" />. Basically this exact behaviour can be seen in the demo dashboard.

In addition to passing in panel blocks to the horizontal and vertical blocks, you can put other horizontal or vertical blocks inside each other to created nested blocks. The following displays one block on the left of the screen with two horizontally stacked blocks to the right of that block: the default settings for the demo dashboard.

const defaultData = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel'
    },
    {
      type: 'vertical',
      size: 0.6,
      children: [
        {
          type: 'panel',
          size: 0.5,
          component: 'MyTestPanel'
        },
        {
          type: 'panel',
          size: 0.5,
          component: 'MyTestPanel'
        }
      ]
    }
  ]
};

Editing the dashboard

So far we’ve just covered how you can display dashboards to the user, but the dashboards are user editable as well. It uses the HTML5 drag and drop API, so it’s supported in nearly all desktop browsers including IE11.

The Dashboard component has an editing property: just set it to true and the dashboard will be user editable:

<dashboard :data="data" :component-getter="getComponent" :editing="true"></dashboard>

Now, the user is able to drag panels into different places, add new panels and delete existing panels.

When something is being dragged, the dataTransfer property of the event is set to a JSON stringified version of a component object with component and meta properties.

You can create an element which will create a new panel when dragged onto the dashboard like this:

<template>
  <div @dragstart="handleDragstart" draggable="true">
    Drag me!
  </div>
</template>

<script>
  export default {
    methods: {
      handleDragstart(e) {
        const data = {
          component: 'MyTestPanel',
          meta: {
            color: 'red'
          }
        };
        e.dataTransfer.setData('text', JSON.stringify(data));
      }
    }
  };
</script>

Then when it is dragged onto the dashboard the MyTestPanel component will be added. It can either be dragged onto the side of a panel to create a new panel next to it, or onto an existing panel to replace that panel.

Saving dashboard layout

The dashboard modifies the original object passed to it (I know, I know), so you can just store it in a database or in localStorage or something and pass it straight back in to the dashboard next time the users accesses it.

Let’s add an Edit/Save button to our first example that saves to and loads from localStorage:

<template>
  <dashboard :data="dashboardData" :component-getter="getComponent" :editing="editing"></dashboard>
  <button @click.prevent="handleButtonClick">{{ editing ? 'Save' : 'Edit' }}</button>
</template>

<script>
  import Dashboard from 'dirk';
  import MyTestPanel from './MyTestPanel.vue';

  const storedData = localStorage.getItem('dirk-data');

  const defaultData = {
    type: 'horizontal',
    size: 1,
    children: [
      {
        type: 'panel',
        size: 1,
        component: 'MyTestPanel'
      }
    ]
  };

  export default {
    data: () => ({
      dashboardData: storedData ? JSON.parse(storedData) : defaultData,
      editing: false
    }),
    methods: {
      getComponent(name) {
        if (name === 'MyTestPanel') {
          return MyTestPanel;
        }

        return { render: h => h('p', '404 component not found') };
      },
      handleButtonClick() {
        if (this.editing) {
          localStorage.setItem('dirk-data', JSON.stringify(this.dashboardData));
        }

        this.editing = !this.editing;
      }
    },
    components: {
      Dashboard,
    }
  };
</script>

Now the first time the dashboard is loaded, it will load from the default data, and when the user makes a change to the dashboard and saves it, the new dashboard will be stored in localStorage and loaded instead of the default data the new time the user accesses the page.

Events

The dashboard component also emits two events: changed and changing.

  • The changed event is triggered when anything about the dashboard changes: when the users adds, removes, or changes a panel, or when the user changes the size of a panel.
  • The changing event event is emitted when the user is currently dragging the side of a panel to resize it. This event is useful for handling the aspect ratio of a component - but be careful not to do anything too heavy here or the resize will feel jerky.

Browser support

Dirk is tested in all modern desktop browsers, all the way down to IE11. We’re using it on our production website and shipping it to clients who use IE, so it should be pretty stable.

Mobile support isn’t as good: while everything displays, no android browsers and only the latest iOS browser have support for the drag and drop API at the time of writing, so you can’t really enable editing on mobile.

Download Details:

Author: SamKnows

Live Demo: https://samknows.github.io/dirk/

GitHub: https://github.com/SamKnows/dirk

#javascript #vue-js #vue

What is GEEK

Buddha Community

A dashboard configuration tool powered by Vue
Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Comparing Power BI with other tools

the Business Intelligence (BI) world has been moving towards self-service BI. As expected, several vendors created tools empowering regular users to gain insights from their data. Among the many, there is Power BI. Nowadays, users want to understand the differences between Product X and Power BI.

This is image title

One of the most common questions in conferences and user group sessions is likely, “can you provide a comparison between this product and Power BI?”.

The answer is almost always, “No, I cannot compare them, because they are too different”. First, one needs to understand the deep difference between Power BI and most other reporting tools on the market. Only later does a comparison make any sense. As a matter of fact, I think Power BI can be compared to only a few products on the market today. I would like to add my point of view to the discussion.

To get in-Depth knowledge on Power BI you can enroll for a live demo on Power BI online training

Indeed, Power BI is a tremendously powerful data modeling tool that happens to come with a pretty face; most other products are beautifully crafted reporting tools with a pretty face. The only thing they have in common is the pretty face. If you stop at what they have in common, you are only comparing a small fraction of the whole product, and that would be unfair.

To go further, a deeper understanding of basic BI concepts is needed.

Beware: this article is biased. I love Power BI and I make my living out of it. Nevertheless, I am a BI professional; I started working with Business Intelligence many years ago and I have gathered experience that I can share. I will try to be as fair as I can in this post, as my goal is not to provide a comparison with any tool. The goal of this post is to help you understand what you really need to evaluate when making (or reading) any comparison between different BI products.

At the top level, any Business Intelligence solution is composed of three layers:

Raw data: these are the data sources that one wants to analyze. Raw data comes as is.
Semantic model: this is where data is re-arranged to optimize it for analysis. Here you also define the calculations required by the reports.
Reports: these are the nice dashboards you can build with the tool.

Power BI manages all three layers: you start from raw data, you can build a semantic layer, and finally you prepare reports. Most other reporting tools are focused on the last layer and are limited in the previous two. In other words, they are missing the capability to build a real semantic layer. It is important to clarify what a semantic layer is, to understand what you would miss by choosing a different product.

In the old ages of BI, there was a clear separation between users and developers. A BI developer would build a project to help users extract insights from their data, and build reports. Users did not need to understand tables, relationships, or calculations. The developer oversaw shaping the tables, providing predefined calculations and giving sensible names to entities. Leveraging the semantic model, users did not have to know DAX, MDX or SQL.

A semantic model lets users interact with business entities like customers, sales, and products. Users would place those entities in reports made with Excel or with other reporting tools. Regular users were happy with just Excel and a Pivot Table. More advanced users wanted more powerful tools, and this led to the creation of several reporting tools with their ad-hoc programming language to create more advanced formulas. Regardless, the important thing is that no matter how powerful those tools are, they were still reporting tools based on the existence of a previously crafted semantic model. No semantic model, no reporting.

Picture this: a BI tool lets a developer build a semantic model. A reporting tool lets a user build a report on top of an existing semantic model. You need both to create a BI solution.Learn more from Power BI online course

Unfortunately, building a BI project takes time. Users were hungry for reports. This led to the start of the Self-Service BI era. Self-service BI is the idea of users building reports themselves, to reduce development time and to build a democratic knowledge about data. Sounds cool and terrifying at the same time.

Anyway, this is where we are today. Obviously, driven by the market several vendors started to build self-service BI tools. A few new products appeared on the market. Rather, existing tools evolved into new ones, targeting self-service BI. Keep in mind: any self-service BI tool requires the functionalities to build both the semantic model and the report in the same tool. Thus, depending on where you start, you have two options to have an existing product evolve into a self-service product:

If you already have a semantic model tool, you need to add reporting capabilities. You need to make it easier to use, because the target is no longer a BI professional but a regular user instead.
If you already have a reporting tool, you need to add the capability to build a semantic model because your users need to massage the data and build calculations on top of the resulting model.

In both cases, in the end you obtain a tool that mixes the capabilities to create a semantic model and to build reports. After this first step, you can add tons of different features like sharing with other users, building wizards to automatically connect to other services, improving the formula language and so on. But the core is always the same: a semantic model and a reporting tool, bound together in a nice package.

Even though we consider Power BI to be a new product, it is actually the evolution of Power Pivot and Analysis Services Tabular (semantic model), Power Query (querying tool), and Power View (the first version of the reporting tool released with Excel and SharePoint). Other vendors took similar steps, with different starting points. It is fair to say that several vendors started from a reporting tool, adding the semantic model to it.

Now, if you need to compare two BI tools, you need to compare at least these two features: the semantic model and the tools to build a report.

Say you want to compare Product X with Power BI; you show me how easy it is to build a gorgeous report on top of an SQL view, much easier and much more powerful than Power BI. Cool, but you are only comparing a fraction of both products. Reporting-wise, sure, Product X is better than Power BI. But there are other considerations: can you load multiple tables in Product X? Can you build relationships between them? Can you use a programming language to author complex calculations that involve scanning different tables? All these operations belong to the semantic model. A fair comparison needs to apply to all the features.

This is what Power BI offers you:

Power Query – a data transformation tool which is easy to use and yet incredibly powerful. It can load virtually anything and join data from different sources.
A modeling environment where you can build different kinds of relationships between tables and build powerful models. It does not hurt that it runs on top of one of the fastest databases I have ever seen.
DAX – a programming language which is not easy, but lets you author nearly any query and calculation. Yes, on this I am biased for sure!
Power BI – a reporting engine which is very good in building dashboards and reports. It can also be extended with custom visuals and third-party products.

Then, there is web-based reporting and sharing, a mobile experience, the ability to load from nearly any data source in the cloud or on premises and many other useful features. Yet, the core is composed of the four features above. If you want to compare apples to apples, you need to compare at least these four parts. Be mindful: you need all of them. A tool that requires you to build a single table because it does not let you relate two tables is nothing but a nice reporting tool. Comparing it to Power BI does not make much sense to me.

Moreover, it does not come by chance that to learn Power BI, one needs to learn new programming languages. Each feature has its own language, and this is just the right thing to have.

Finally, reporting. Reporting is only the last part, even though it is the most visible one. You might find other products are better than Power BI when it comes to reporting. This is fine, if you are aware that you are only comparing a fraction of Power BI with the whole of Product X.

I love Power BI, and I would really love to see a fair comparison between Power BI and any other product. We could learn a lot from the topic. But for it to be fair, it cannot just be based on how easy it is to build a pie chart (just kidding! You are not using a pie chart, are you?). One needs to evaluate everything both products have to offer.

To get in-depth knowledge of this technology and to develop skills to make a great career in this regard one can opt for Power BI online training Hyderabad.

#power bi training #power bi course #learn power bi #microsoft power bi training #power bi online training #power bi online course

Tableau vs Power BI: Comparing the Data Visualization Tools

In analytics, Tableau is the leading visualisation tool. Its rich analytical features and attention to data details are the reason behind its popularity. Power BI, on the other hand, is preferred by professionals who are more comfortable with Microsoft Office365. The users can connect Excel queries, data models and are able to report to the dashboard.
This is image title

While the usage of both these tools might depend on many factors, here is a quick comparison of the two popular tools on various functionalities.

To get in-Depth knowledge on Power BI you can enroll for a live demo on Power BI online training

1. Performance
One of the crucial differences between Tableau and Power BI is that Tableau is an extensible platform which not only provides visualisations but also helps in gaining a better understanding of the data. Both the tools are excellent in visualisation but when it comes to the depth of data, Tableau helps an analyst to dive deeper into the data by performing “what-if” analysis on the data.

2. Flexibility
A user can deploy tableau on-premises, on the public cloud on Microsoft Azure, Amazon Web Services, or Google Cloud Platform, or on Tableau Online. While PowerBI, an upgradation of Microsoft Excel can be said as not so flexible as it serves only as a software-as-a-service model.
Power BI vs Tableau: A Data Analytics Duel - TechnologyAdvice

3. User Interface
Tableau is mainly designed keeping data analysts in mind. The richer analytical capabilities for visualisation helps an analyst gain insight into large datasets. It allows the user to create customised dashboards which can be considered as more of a pro-level. Microsoft PowerBI is simpler than Tableau and offers a better intuitive interface, especially for the beginners. This tool can be used by a coder as well as a non-coder.

4. Visualisation
Power BI focuses on data modelling and offers features of data manipulation and then provides data visualisation while tableau strictly focuses on data visualisation. Learn more from Power BI online course

5. AI-Powered
PowerBI tool with its Microsoft Flow and its AI builder tool can help in building apps with a layer of intelligence. With the advantages of Microsoft AI, the user can prepare data, build machine learning models and gain insights from both structured and unstructured data. On the hand, Tableau is working on natural language capabilities to simplify analytics and help the users who have no prior data analysis experience, known as Ask Data. Recently, Tableau has also announced the beta version of Explain Data, a new AI-powered feature to help users understand the “why” behind unexpected values in their data.

6. Price
PowerBI offers two subscription offerings, Power BI Pro and Power BI Premium. Power BI Pro is priced at .99 per user per month which is a self-service BI where user can collaborate, publish, share and perform ad-hoc analysis. Whereas Power BI Premium is priced at ,995 per month per dedicated cloud compute and storage resource. Here, the user can perform big data analytics, advanced administration and more.

Tableau, on the other hand, offers three subscriptions — Tableau Creator, Explorer, and Viewer. Tableau Creator is priced at user per month and it includes Tableau Desktop, Prep Builder and one creator license of Tableau Server. Tableau Explorer is priced at per user per month where they can explore the trusted data with self-service analytics and the Tableau Viewer is priced at user per month and here the user can view and interact with dashboards and visualisations in a secured way. These pricings are for teams and organisations where multiple users/viewing is required.
Take your career to new heights of success with Power BI online training Hyderabad

#power bi certification #power bi training #power bi online training hyderabad #power bi course #power bi online training #power bi online training india

sophia tondon

sophia tondon

1620885491

Microsoft Power BI Consulting | Power BI Solutions in India

Hire top dedicated Mirosoft power BI consultants from ValueCoders who aim at leveraging their potential to address organizational challenges for large-scale data storage and seamless processing.

We have a team of dedicated power BI consultants who help start-ups, SMEs, and enterprises to analyse business data and get useful insights.

What are you waiting for? Contact us now!

No Freelancers, 100% Own Staff
Experienced Consultants
Continuous Monitoring
Lean Processes, Agile Mindset
Non-Disclosure Agreement
Up To 2X Less Time

##power bi service #power bi consultant #power bi consultants #power bi consulting #power bi developer #power bi development

sophia tondon

sophia tondon

1619670565

Hire Power BI Developer | Microsoft Power BI consultants in India

Hire our expert Power BI consultants to make the most out of your business data. Our power bi developers have deep knowledge in Microsoft Power BI data modeling, structuring, and analysis. 16+ Yrs exp | 2500+ Clients| 450+ Team

Visit Website - https://www.valuecoders.com/hire-developers/hire-power-bi-developer-consultants

#power bi service #power bi consultant #power bi consultants #power bi consulting #power bi developer #power bi consulting services