Bar

Компоненту vs-bar розроблено для відображення та аналітики даних у вигляді колонок які відображають показники даних

✏️ Note

Для корректного відображення блоку віджета, parent блок повинен мати ширину та висоту!

Підключення

⚠️ Warning

В hbs відображення данних працює лише через пропс api

hbs

{{{_vue "vs-bar"}}}

Vue

<div style="width: 600px; height: 300px'">
  <VsBar />
</div>

Component API

Content

Name	Description	Type
data	Розмір кнопки (mini, small, large)	Object
options	Колір кнопки. Доступні кольори	Object
seriesOptios	Тип кнопки (primary, text, plain, border, link, default)	Object

Приклади

Простий віджет

Приклад вигляду просто віджету без налаштувань стилів та елементів графіку

    <template>
      <div style="width: 715px; height: 300px; ">
        <VsBar :dataset="barData" :options="barStyle.chart"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
           barStyle: {
              chart: {
                color: ["skyblue"],
              },
            },
            barData: {
              dimensions: ["year", "Sells"],
              source: [
                { year: 2015, Sells: 451.3 },
                { year: 2016, Sells: 85.3 },
                { year: 2017, Sells: 185.3 },
                { year: 2018, Sells: 290.3 },
                { year: 2019, Sells: 490.3 },
                { year: 2020, Sells: 390.3 },
                { year: 2021, Sells: 490.3 },
                { year: 2022, Sells: 590.3 },
              ],
            },
          };
        },
      };
    </script>
  

Віджет з декількома колонками

Віджет Bar також може мати декілька показників за один проміжок

    <template>
      <div style="width: 715px; height: 300px; ">
        <VsBar :dataset="barDataGroup"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            barDataGroup: {
              dimensions: ["year", "Users", "Sells"],
              source: [
                { year: 2015, Users: 45.3, Sells: 10 },
                { year: 2016, Users: 85.3, Sells: 53 },
                { year: 2017, Users: 185.3, Sells: 140 },
                { year: 2018, Users: 290.3, Sells: 286 },
                { year: 2019, Users: 490.3, Sells: 286 },
                { year: 2020, Users: 390.3, Sells: 286 },
                { year: 2021, Users: 490.3, Sells: 286 },
                { year: 2022, Users: 590.3, Sells: 286 },
              ],
            },
          };
        },
      };
    </script>
  

Налаштування віджету

Приклад вигляду віджета з налаштуваннями елементів графіку та відображення віджета

    <template>
      <div style="width: 715px; height: 300px;">
        <VsBar :dataset="barDataGroup"  :options="barStyle.chart" :seriesOptions="barStyle.series"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            barDataGroup: {
              dimensions: ["year", "Users", "Sells"],
              source: [
                { year: 2015, Users: 45.3, Sells: 10 },
                { year: 2016, Users: 85.3, Sells: 53 },
                { year: 2017, Users: 185.3, Sells: 140 },
                { year: 2018, Users: 290.3, Sells: 286 },
                { year: 2019, Users: 490.3, Sells: 286 },
                { year: 2020, Users: 390.3, Sells: 286 },
                { year: 2021, Users: 490.3, Sells: 286 },
                { year: 2022, Users: 590.3, Sells: 286 },
              ],
            },
            barStyle: {
              chart: {
                color: ["#8c6ac4", "#ffaf51"],
              },
              series: {
                markLine: {
                  data: [
                    { type: "min", name: "Min", lineStyle: { color: "#ff715e" } },
                    { type: "median", name: "Median", lineStyle: { color: "#715c87" } },
                  ],
                },
                markPoint: {
                  data: [
                    { type: "max", name: "Max" },
                    { type: "min", name: "Min" },
                  ],
                },
                label: {
                  show: true,
                },
              },
            },
          };
        },
      };
    </script>