@operato/scene-chartjs 0.0.5

package/templates/doughnut-chart.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/doughnut-chart.png'
+
+export default {
+  type: 'doughnut chart',
+  description: 'ChartJS - doughnut',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 0,
+    left: 0,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'doughnut',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            data: [],
+            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+            borderWidth: 0,
+            dataKey: 'value'
+          }
+        ],
+        labelDataKey: 'label'
+      },
+      options: {
+        theme: 'dark',
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        animation: {
+          animateScale: true
+        }
+      }
+    },
+    data: [
+      {
+        label: 'Red',
+        value: 300
+      },
+      {
+        label: 'Blue',
+        value: 50
+      },
+      {
+        label: 'Yellow',
+        value: 100
+      }
+    ]
+  }
+}

package/templates/horizontal-bar-chart.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/horizontal-bar-chart.png'
+
+export default {
+  type: 'horizontal bar chart',
+  description: 'ChartJS - horizontal barchart',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 200,
+    left: 300,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'horizontalBar',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            label: 'series 1',
+            data: [],
+            backgroundColor: 'rgb(66, 110, 164)',
+            borderColor: 'rgb(66, 110, 164)',
+            borderWidth: 0,
+            dataKey: 'value1'
+          },
+          {
+            label: 'series 2',
+            data: [],
+            backgroundColor: 'rgb(62, 196, 221)',
+            borderColor: 'rgb(62, 196, 221)',
+            borderWidth: 0,
+            dataKey: 'value2'
+          }
+        ],
+        labelDataKey: 'color'
+      },
+      options: {
+        theme: 'dark',
+        xGridLine: true,
+        yGridLine: false,
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            }
+          ],
+          yAxes: [
+            {
+              id: 'left',
+              position: 'left',
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            }
+          ]
+        }
+      }
+    },
+    data: [
+      {
+        color: 'Red',
+        value1: 12,
+        value2: 24
+      },
+      {
+        color: 'Blue',
+        value1: 19,
+        value2: 9
+      },
+      {
+        color: 'Yellow',
+        value1: 3,
+        value2: 6
+      },
+      {
+        color: 'Green',
+        value1: 5,
+        value2: 2
+      },
+      {
+        color: 'Purple',
+        value1: 2,
+        value2: 4
+      },
+      {
+        color: 'Orange',
+        value1: 3,
+        value2: 1
+      }
+    ]
+  }
+}

package/templates/index.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import barChart from './bar-chart'
+import doughnutChart from './doughnut-chart'
+import horizontalBarChart from './horizontal-bar-chart'
+import lineChart from './line-chart'
+import mixedChart from './mixed-chart'
+import pieChart from './pie-chart'
+import polarAreaChart from './polar-area-chart'
+import radarChart from './radar-chart'
+
+export default [
+  barChart,
+  horizontalBarChart,
+  lineChart,
+  mixedChart,
+  pieChart,
+  doughnutChart,
+  polarAreaChart,
+  radarChart
+]

package/templates/line-chart.js

@@ -0,0 +1,155 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/line-chart.png'
+
+export default {
+  type: 'line chart',
+  description: 'ChartJS - line chart',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 0,
+    left: 0,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            label: 'series 1',
+            type: 'line',
+            backgroundColor: 'rgb(66, 110, 164)',
+            borderColor: 'rgb(66, 110, 164)',
+            borderWidth: 3,
+            pointBorderColor: 'rgb(66, 110, 164)',
+            pointBorderWidth: 3,
+            pointBackgroundColor: 'rgba(255,255,255,1)',
+            lineTension: 0.4,
+            yAxisID: 'left',
+            data: [],
+            dataKey: 'value1',
+            fill: false
+          },
+          {
+            label: 'series 2',
+            type: 'line',
+            backgroundColor: 'rgb(62, 196, 221)',
+            borderColor: 'rgb(62, 196, 221)',
+            borderWidth: 3,
+            pointBorderColor: 'rgb(62, 196, 221)',
+            pointBorderWidth: 3,
+            pointBackgroundColor: 'rgba(255,255,255,1)',
+            lineTension: 0.4,
+            yAxisID: 'left',
+            data: [],
+            dataKey: 'value2',
+            fill: false
+          }
+        ],
+        labelDataKey: 'data'
+      },
+      options: {
+        theme: 'dark',
+        xGridLine: false,
+        yGridLine: true,
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                display: true
+              }
+            }
+          ],
+          yAxes: [
+            {
+              id: 'left',
+              position: 'left',
+              gridLines: {
+                display: true
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            },
+            {
+              id: 'right',
+              position: 'right',
+              display: false,
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            }
+          ]
+        }
+      }
+    },
+    data: [
+      {
+        data: 'Data 1',
+        value1: 20,
+        value2: 60
+      },
+      {
+        data: 'Data 2',
+        value1: 30,
+        value2: 10
+      },
+      {
+        data: 'Data 3',
+        value1: 80,
+        value2: 40
+      },
+      {
+        data: 'Data 4',
+        value1: 20,
+        value2: 30
+      },
+      {
+        data: 'Data 5',
+        value1: 40,
+        value2: 80
+      },
+      {
+        data: 'Data 6',
+        value1: 10,
+        value2: 30
+      },
+      {
+        data: 'Data 7',
+        value1: 60,
+        value2: 20
+      }
+    ]
+  }
+}

package/templates/mixed-chart.js

@@ -0,0 +1,152 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/mixed-chart.png'
+
+export default {
+  type: 'mixed chart',
+  description: 'ChartJS - mixed chart',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 0,
+    left: 0,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'bar',
+      subType: 'mixed',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            type: 'line',
+            label: 'series 1',
+            backgroundColor: 'rgb(66, 110, 164)',
+            borderColor: 'rgb(66, 110, 164)',
+            borderWidth: 3,
+            pointBorderColor: 'rgb(66, 110, 164)',
+            pointBorderWidth: 3,
+            pointBackgroundColor: 'rgba(255,255,255,1)',
+            lineTension: 0.4,
+            fill: false,
+            yAxisID: 'left',
+            data: [],
+            dataKey: 'value1'
+          },
+          {
+            type: 'bar',
+            label: 'series 2',
+            backgroundColor: 'rgb(62, 196, 221)',
+            borderColor: 'rgb(62, 196, 221)',
+            borderWidth: 0,
+            yAxisID: 'right',
+            data: [],
+            dataKey: 'value2'
+          }
+        ],
+        labelDataKey: 'data'
+      },
+      options: {
+        theme: 'dark',
+        multiAxis: true,
+        xGridLine: false,
+        yGridLine: true,
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                display: true
+              }
+            }
+          ],
+          yAxes: [
+            {
+              position: 'left',
+              id: 'left',
+              gridLines: {
+                display: true
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            },
+            {
+              id: 'right',
+              position: 'right',
+              display: true,
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                labelString: '',
+                display: false
+              },
+              ticks: {
+                autoMin: true,
+                autoMax: true,
+                display: true
+              }
+            }
+          ]
+        }
+      }
+    },
+    data: [
+      {
+        data: 'Data 1',
+        value1: 20,
+        value2: 60
+      },
+      {
+        data: 'Data 2',
+        value1: 30,
+        value2: 10
+      },
+      {
+        data: 'Data 3',
+        value1: 80,
+        value2: 40
+      },
+      {
+        data: 'Data 4',
+        value1: 20,
+        value2: 30
+      },
+      {
+        data: 'Data 5',
+        value1: 40,
+        value2: 80
+      },
+      {
+        data: 'Data 6',
+        value1: 10,
+        value2: 30
+      },
+      {
+        data: 'Data 7',
+        value1: 60,
+        value2: 20
+      }
+    ]
+  }
+}

package/templates/pie-chart.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/pie-chart.png'
+
+export default {
+  type: 'pie chart',
+  description: 'ChartJS - pie chart',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 0,
+    left: 0,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'pie',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            data: [],
+            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+            borderWidth: 0,
+            dataKey: 'value'
+          }
+        ],
+        labelDataKey: 'label'
+      },
+      options: {
+        theme: 'dark',
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        animation: {
+          animateScale: true
+        }
+      }
+    },
+    data: [
+      {
+        label: 'A',
+        value: 80
+      },
+      {
+        label: 'B',
+        value: 15
+      },
+      {
+        label: 'C',
+        value: 15
+      }
+    ]
+  }
+}

package/templates/polar-area-chart.js

@@ -0,0 +1,92 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/polar-area-chart.png'
+
+export default {
+  type: 'polar area chart',
+  description: 'ChartJS - ploar area chart',
+  icon: icon,
+  group: 'chartAndGauge',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  model: {
+    type: 'chartjs',
+    top: 0,
+    left: 0,
+    width: 200,
+    height: 200,
+    chart: {
+      type: 'polarArea',
+      data: {
+        labels: [],
+        datasets: [
+          {
+            label: 'My First dataset',
+            backgroundColor: [
+              'rgba(248, 42, 18, 1)',
+              'rgba(255,99,132,1)',
+              'rgba(9, 64, 169, 1)',
+              'rgba(24, 185, 87, 1)',
+              'rgba(216, 100, 19, 1)',
+              'rgba(82, 8, 99, 1)',
+              'rgba(225, 102, 234, 1)'
+            ],
+            borderColor: 'rgba(179,181,198,1)',
+            borderWidth: 0,
+            data: [],
+            dataKey: 'rate1'
+          }
+        ],
+        labelDataKey: 'hobby'
+      },
+      options: {
+        theme: 'dark',
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        scale: {
+          ticks: {},
+          pointLabels: {}
+        }
+      }
+    },
+    data: [
+      {
+        hobby: 'Eating',
+        rate1: 65,
+        rate2: 28
+      },
+      {
+        hobby: 'Drinking',
+        rate1: 59,
+        rate2: 48
+      },
+      {
+        hobby: 'Sleeping',
+        rate1: 90,
+        rate2: 40
+      },
+      {
+        hobby: 'Designing',
+        rate1: 81,
+        rate2: 19
+      },
+      {
+        hobby: 'Coding',
+        rate1: 56,
+        rate2: 96
+      },
+      {
+        hobby: 'Cycling',
+        rate1: 55,
+        rate2: 27
+      },
+      {
+        hobby: 'Running',
+        rate1: 40,
+        rate2: 100
+      }
+    ]
+  }
+}