@gitlab/ui 36.7.1 → 37.2.0

package/src/components/charts/area/examples/area.basic_plus.example.vue

@@ -1,25 +0,0 @@
-<template>
-  <gl-area-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-    :option="{
-      series: [
-        {
-          type: 'scatter',
-          data: [
-            [2, 5],
-            [6, 10],
-          ],
-        },
-      ],
-    }"
-  />
-</template>

package/src/components/charts/area/examples/index.js

@@ -1,22 +0,0 @@
-import AreaBasicExample from './area.basic.example.vue';
-import AreaBasicPlusExample from './area.basic_plus.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'area-basic',
-        name: 'Basic',
-        description: 'Basic Area Chart',
-        component: AreaBasicExample,
-      },
-      {
-        id: 'area-basic-plus',
-        name: 'Basic plus custom series',
-        description: 'Basic area chart with custom series added',
-        component: AreaBasicPlusExample,
-      },
-    ],
-  },
-];

package/src/components/charts/legend/examples/index.js

@@ -1,27 +0,0 @@
-import LegendBasicExample from './legend.basic.example.vue';
-import LegendToggledExample from './legend.toggled.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'chart-legend-basic',
-        name: 'Basic',
-        description: 'Basic Chart Legend',
-        component: LegendBasicExample,
-      },
-    ],
-  },
-  {
-    name: 'Toggled',
-    items: [
-      {
-        id: 'chart-legend-toggled',
-        name: 'Toggled',
-        description: 'Toggled Chart Legend',
-        component: LegendToggledExample,
-      },
-    ],
-  },
-];

package/src/components/charts/legend/examples/legend.basic.example.vue

@@ -1,55 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/examples/legend.toggled.example.vue

@@ -1,60 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Toggled Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      document.querySelector('#js-chart-legend [role=button]').click();
-    });
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" id="js-chart-legend" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/legend.documentation.js

@@ -1,19 +0,0 @@
-import examples from './examples';
-import description from './legend.md';
-
-export default {
-  description,
-  examples,
-  propsInfo: {
-    averageText: {
-      additionalInfo:
-        'Text for data average (overridden by prop if needed for internationalization)',
-    },
-    maxText: {
-      additionalInfo: 'Text for max amount (overridden by prop if needed for internationalization)',
-    },
-    layout: {
-      additionalInfo: 'Sets the display layout',
-    },
-  },
-};

package/src/components/charts/line/examples/index.js

@@ -1,22 +0,0 @@
-import LineBasicExample from './line.basic.example.vue';
-import LineSeriesExample from './line.series.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'line-basic',
-        name: 'Basic',
-        description: 'Basic line chart',
-        component: LineBasicExample,
-      },
-      {
-        id: 'line-basic-plus',
-        name: 'Basic plus custom series',
-        description: 'Basic line chart with custom series added',
-        component: LineSeriesExample,
-      },
-    ],
-  },
-];

package/src/components/charts/line/examples/line.basic.example.vue

@@ -1,14 +0,0 @@
-<template>
-  <gl-line-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-  />
-</template>

package/src/components/charts/line/examples/line.series.example.vue

@@ -1,25 +0,0 @@
-<template>
-  <gl-line-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-    :option="{
-      series: [
-        {
-          type: 'scatter',
-          data: [
-            [2, 5],
-            [6, 10],
-          ],
-        },
-      ],
-    }"
-  />
-</template>