Data Type

4 files changed, 183 insertions, 7 deletions

diff --git a/app/assets/javascripts/aSpike/components/chart_data_adapter.js b/app/assets/javascripts/aSpike/components/chart_data_adapter.js
new file mode 100644
index 00000000000..1b745127ac2
--- /dev/null
+++ b/app/assets/javascripts/aSpike/components/chart_data_adapter.js
@@ -0,0 +1,4 @@
+export default class ChartDataAdapter {
+
+
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/aSpike/components/grafana_data_adapter.js b/app/assets/javascripts/aSpike/components/grafana_data_adapter.js
new file mode 100644
index 00000000000..7dd27db6126
--- /dev/null
+++ b/app/assets/javascripts/aSpike/components/grafana_data_adapter.js
@@ -0,0 +1,5 @@
+import ChartDataAdapter from './chart_data_adapter';
+
+class GrafanaDataAdapter extends ChartDataAdapter {
+
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/aSpike/components/issues_analytics.vue b/app/assets/javascripts/aSpike/components/issues_analytics.vue
index 3e3006948d5..4e1fc0174ad 100644
--- a/app/assets/javascripts/aSpike/components/issues_analytics.vue
+++ b/app/assets/javascripts/aSpike/components/issues_analytics.vue
@@ -1,15 +1,17 @@
 <script>
-  import { s__ } from '~/locale';
+  import { __ } from '~/locale';
   import { mapGetters, mapActions, mapState } from 'vuex';
   import { engineeringNotation, sum, average } from '@gitlab/ui/utils/number_utils';
-  import { GlLoadingIcon } from '@gitlab/ui';
-  import { GlAreaChart } from '@gitlab/ui/dist/charts';
-
+  import { GlAreaChart, GlLineChart } from '@gitlab/ui/dist/charts';
+  import { GlLoadingIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
   export default {
     components: {
       GlLoadingIcon,
       GlAreaChart,
+      GlLineChart,
+      GlDropdown,
+      GlDropdownItem,
     },
     props: {
       endpoint: {
@@ -24,7 +26,7 @@
         seriesInfo: [
           {
             type: 'solid',
-            name: s__('IssuesAnalytics | Issues created'),
+            name: __('DataSources'),
             color: '#1F78D1',
           },
         ],
@@ -36,6 +38,122 @@
       data() {
         return [];
       },
+       dataSources() {
+        return [
+          'Grafana', 'Prometheus', 'InfluxDB',
+        ];
+      },
+      lineChartData() {
+        return [
+          {
+            "name": "Requested",
+            "data": [
+              [
+                "Mon",
+                1184
+              ],
+              [
+                "Tue",
+                1346
+              ],
+              [
+                "Wed",
+                1035
+              ],
+              [
+                "Thu",
+                1226
+              ],
+              [
+                "Fri",
+                1421
+              ],
+              [
+                "Sat",
+                1347
+              ],
+              [
+                "Sun",
+                1035
+              ]
+            ]
+          },
+          {
+            "name": "Actual",
+            "data": [
+              [
+                "Mon",
+                1509
+              ],
+              [
+                "Tue",
+                1275
+              ],
+              [
+                "Wed",
+                1187
+              ],
+              [
+                "Thu",
+                1287
+              ],
+              [
+                "Fri",
+                1098
+              ],
+              [
+                "Sat",
+                1457
+              ],
+              [
+                "Sun",
+                1452
+              ]
+            ]
+          },
+          {
+            "name": "Predicted",
+            "data": [
+              [
+                "Mon",
+                1041
+              ],
+              [
+                "Tue",
+                1468
+              ],
+              [
+                "Wed",
+                1273
+              ],
+              [
+                "Thu",
+                1503
+              ],
+              [
+                "Fri",
+                1209
+              ],
+              [
+                "Sat",
+                1416
+              ],
+              [
+                "Sun",
+                1213
+              ]
+            ]
+          }
+        ]
+      },
+      lineChartOptions() {
+        return {
+          'xAxis': {
+            'name': 'Days',
+            'type': 'category',
+          },
+        };
+      },
       showChart() {
         return true;
       },
@@ -81,14 +199,33 @@
 <template>
   <div class="d-block">
     <div v-if="loading" class="issues-analytics-loading text-center">
-      <gl-loading-icon :inline="true" :size="4" />
+      <gl-loading-icon :inline="true" :size="4"/>
     </div>
 
     <div v-if="showChart" class="issues-analytics-chart">
-      <h4 class="chart-title">Test area chart</h4>
+      <h4 class="chart-title">Test data source</h4>
+      <div class="row">
+        <gl-dropdown
+                class="col-8 col-md-9 gl-pr-0"
+                menu-class="w-100 mw-100"
+                toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
+                text="-- Select datasource --"
+        >
+
+          <gl-dropdown-item
+                  v-for="source in dataSources"
+                  class="w-100"
+                  @click="$emit('select-project', source)">
+            <li>{{source}}</li>
+          </gl-dropdown-item>
+
+        </gl-dropdown>
+      </div>
 
       <gl-area-chart :data="data"
       ></gl-area-chart>
+      <gl-line-chart :data="lineChartData"
+                     :option="lineChartOptions"/>
     </div>
 
   </div>
diff --git a/app/assets/javascripts/aSpike/types/sample_data_type.ts b/app/assets/javascripts/aSpike/types/sample_data_type.ts
new file mode 100644
index 00000000000..eb3350369d4
--- /dev/null
+++ b/app/assets/javascripts/aSpike/types/sample_data_type.ts
@@ -0,0 +1,30 @@
+interface DataSource {
+  chartType: ChartType;
+  chartOptions: ChartOptions;
+  source: SourceEntity[];
+}
+
+export interface ChartOptions {
+  xAxis:  {
+    name: string;
+    type: AxisType
+  };
+}
+
+export interface SourceEntity {
+  name?: string;
+  data: number[]
+}
+
+enum ChartType {
+  "column",
+  "line",
+  "area"
+}
+
+enum AxisType {
+  "value",
+  "category",
+  "time",
+  "log"
+}