implemented scatter plot and demo, merged grid.js

demo/src/scatter_grid_test.js

@@ -2,47 +2,121 @@ import { GridWidget } from "@polaris/dashboard-sdk";
 
 const data = [
     {
-        type: "heatmap",
+        type: "scatterchart",
         name: "0-25%",
         options: {
             showLegend: false,
+            showAxes: false,
+            xmax: 10,
+            ymax: 100
         },
         data:
         [
-
+            {column1: 0, column2: 40, highlight: false},
+            {column1: 2, column2: 26, highlight: false},
+            {column1: 5, column2: 28, highlight: false},
+            {column1: 7, column2: 17, highlight: false},
+            {column1: 9, column2: 39, highlight: false},
+            {column1: 10, column2: 60, highlight: false},
+            {column1: 8, column2: 78, highlight: false},
+            {column1: 6, column2: 65, highlight: false},
+            {column1: 4, column2: 54, highlight: false},
         ]
     },
     {
-        type: "heatmap",
+        type: "scatterchart",
         name: "26-50%",
         options: {
             showLegend: false,
+            showAxes: false,
+            xmax: 10,
+            ymax: 100
         },
         data:
         [
-
+            {column1: 1, column2: 42, highlight: false},
+            {column1: 2, column2: 54, highlight: false},
+            {column1: 3, column2: 87, highlight: false},
+            {column1: 4, column2: 65, highlight: false},
+            {column1: 5, column2: 78, highlight: false},
+            {column1: 6, column2: 92, highlight: false},
+            {column1: 7, column2: 12, highlight: false},
+            {column1: 8, column2: 54, highlight: false},
+            {column1: 9, column2: 34, highlight: false},
+            {column1: 10, column2: 42, highlight: false},
+            {column1: 1, column2: 27, highlight: false},
+            {column1: 2, column2: 29, highlight: false},
+            {column1: 3, column2: 11, highlight: false},
+            {column1: 4, column2: 37, highlight: false},
+            {column1: 5, column2: 70, highlight: false},
+            {column1: 6, column2: 48, highlight: false},
+            {column1: 7, column2: 95, highlight: false},
+            {column1: 8, column2: 24, highlight: false},
         ]
     },
     {
-        type: "heatmap",
+        type: "scatterchart",
         name: "51-75%",
         options: {
             showLegend: false,
+            showAxes: false,
+            xmax: 10,
+            ymax: 100
         },
         data:
         [
-
+            {column1: 1, column2: 32, highlight: false},
+            {column1: 2, column2: 34, highlight: false},
+            {column1: 3, column2: 27, highlight: false},
+            {column1: 4, column2: 45, highlight: false},
+            {column1: 5, column2: 58, highlight: false},
+            {column1: 6, column2: 72, highlight: false},
+            {column1: 7, column2: 87, highlight: false},
+            {column1: 8, column2: 80, highlight: false},
+            {column1: 9, column2: 18, highlight: false},
+            {column1: 10, column2: 25, highlight: false},
+            {column1: 1, column2: 34, highlight: false},
+            {column1: 2, column2: 46, highlight: false},
+            {column1: 3, column2: 58, highlight: false},
+            {column1: 4, column2: 67, highlight: false},
+            {column1: 5, column2: 79, highlight: false},
+            {column1: 6, column2: 80, highlight: false},
         ]
     },
     {
-        type: "heatmap",
+        type: "scatterchart",
         name: "76-100%",
         options: {
             showLegend: false,
+            showAxes: false,
+            xmax: 10,
+            ymax: 100
         },
         data:
             [
-
+                {column1: 1, column2: 32, highlight: false},
+                {column1: 2, column2: 34, highlight: false},
+                {column1: 3, column2: 27, highlight: false},
+                {column1: 4, column2: 75, highlight: false},
+                {column1: 5, column2: 98, highlight: false},
+                {column1: 6, column2: 62, highlight: false},
+                {column1: 7, column2: 72, highlight: false},
+                {column1: 8, column2: 24, highlight: false},
+                {column1: 9, column2: 34, highlight: true},
+                {column1: 10, column2: 44, highlight: false},
+                {column1: 1, column2: 67, highlight: false},
+                {column1: 2, column2: 89, highlight: false},
+                {column1: 3, column2: 21, highlight: false},
+                {column1: 4, column2: 17, highlight: false},
+                {column1: 5, column2: 80, highlight: false},
+                {column1: 6, column2: 68, highlight: false},
+                {column1: 7, column2: 45, highlight: false},
+                {column1: 8, column2: 44, highlight: false},
+                {column1: 9, column2: 26, highlight: false},
+                {column1: 10, column2: 28, highlight: false},
+                {column1: 1, column2: 17, highlight: false},
+                {column1: 2, column2: 39, highlight: false},
+                {column1: 3, column2: 60, highlight: false},
             ]
     }
 ]

src/js/charts/grid.js

@@ -11,6 +11,8 @@ import { PieChartWidget } from "./piechart";
 import { SimpleGroupedBarChartWidget } from "./simple_grouped_barchart";
 import { StackedBarChartWidget } from "./stacked_barchart";
 import {TextElement} from "../elements/textelement";
+import { ScatterChartWidget } from "./scatterchart";
+
 
 const chart_types = [
   "areachart",
@@ -21,7 +23,8 @@ const chart_types = [
   "linechart",
   "piechart",
   "simple_grouped_barchart",
-  "stacked_barchart"
+  "stacked_barchart",
+  "scatterchart"
 ]
 
 
@@ -184,8 +187,16 @@ export class GridWidget extends BaseChartWidget {
             chart.options
           );
           break;
+        case "scatterchart":
+          subwidget = new ScatterChartWidget(
+            "",
+            "",
+            chart.data,
+            chart.options
+          );
+          break;
         default: // unknown -> render nothing
-          this.widget.removeChild(subwidget_div);
+          widget.removeChild(subwidget_div);
           continue;
       }
 

src/js/charts/scatterchart.js

+import * as d3 from "d3";
+import { BaseChartWidget } from "./base";
+
+// options.highlight -> {column1, column2}
+
+export class ScatterChartWidget extends BaseChartWidget {
+  constructor(title, description, data, options) {
+    if (options.transform) data = (data ?? []).map(options.transform);
+
+    super(title, description, data, options);
+  }
+
+  plot(divWidth, divHeight, el) {
+    const [width, height] = this.clearAndScaleSvg(divWidth, divHeight);//, 25, 25);
+    this.drawTitle();
+
+    if (!this.dataIsValid) {
+      this.showErrorMessage(divWidth, divHeight);
+      return this.wrapper.innerHTML;
+    }
+
+    const circle_color = "color" in this.options ? this.options.color : "#001122";
+    const highlight_color = "highlight_color" in this.options ? this.options.highlight_color : "#00AA44";
+
+    const xmax = "xmax" in this.options ? this.options.xmax : d3.max(this.data, (d) => d.column1);
+    const ymax = "ymax" in this.options ? this.options.ymax : d3.max(this.data, (d) => d.column2);
+
+    const xScale = d3.scaleLinear().range([0, xmax]);
+    const yScale = d3.scaleLinear().range([0, ymax]);
+
+    xScale.domain([0, xmax]);
+    yScale.domain([0, ymax]);
+
+    const showAxes = "showAxes" in this.options ? this.options.showAxes : true;
+    if(showAxes) {
+      this.appendXAxis(xScale, height);
+      this.appendXAxisLabel(width, height);
+      this.appendYAxisLabel();
+      this.g.append("g").attr("transform", "translate(0, 0)").call(d3.axisLeft(yScale));
+    }
+
+    this.g.append('g')
+    .selectAll("dot")
+    .data(this.data)
+    .enter()
+    .append("circle")
+      .attr("cx", function (d) { return xScale(d.column1); } )
+      .attr("cy", function (d) { return yScale(d.column2); } )
+      .attr("r", 2.5)
+      .style("fill", function(d) { return "highlight" in d ? (d.highlight ? highlight_color : circle_color) : circle_color} )
+
+    return this.wrapper.innerHTML;
+  }
+}