Line

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

✏️ Note

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

Підключення

⚠️ Warning

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

hbs

{{{_vue "vs-line"}}}

Vue

<div style="width: 600px; height: 300px'">
  <VsLine />
</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; ">
        <VsLine :dataset="lineData" :options="lineStyle.chart"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
           lineStyle: {
              chart: {
                color: ["skyblue"],
              },
            },
            lineData: {
              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>
  

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

Віджет Line також може мати декілька показників у вигляді ліній за один проміжок

    <template>
      <div style="width: 715px; height: 300px; ">
        <VsLine :dataset="lineDataGroup"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            lineDataGroup: {
              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;">
        <VsLine :dataset="lineDataGroup"  :options="lineStyle.chart" :seriesOptions="lineStyle.series"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            lineDataGroup: {
              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 },
              ],
            },
            lineStyle: {
              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>