Componentize bar charts (#1557)

* create miniHistogram Component * use MiniHistogram * create MiniStackedBar Component * Use MiniStackedBar * update graphs on colorAccessor change * Move bin creation out of miniHistogram * rename expressionLabel * breakout stackedbar bin creation * Trigger workflow * move components to individual folders * rename constant
2026-10-03 07:38:12 +08:00 · 2020-06-15 11:32:55 -07:00
parent 77ffa0712e
commit 23619010c3
3 changed files with 301 additions and 13 deletions
@@ -0,0 +1,70 @@
+// jshint esversion: 6
+import React from "react";
+
+export default class MiniStackedBar extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  drawStacks = () => {
+    const {
+      domainValues,
+      scale,
+      domain,
+      colorScale,
+      occupancy,
+      width,
+      height,
+    } = this.props;
+
+    const ctx = this.canvasRef?.current.getContext("2d");
+
+    ctx.clearRect(0, 0, width, height);
+    let currentOffset = 0;
+
+    let occupancyValue;
+    let scaledValue;
+    let value;
+
+    for (let i = 0, { length } = domainValues; i < length; i += 1) {
+      value = domainValues[i];
+      occupancyValue = occupancy.get(value);
+      scaledValue = scale(occupancyValue);
+      ctx.fillStyle = occupancyValue
+        ? colorScale(domain.indexOf(value))
+        : "rgb(255,255,255)";
+      ctx.fillRect(currentOffset, 0, occupancyValue ? scaledValue : 0, height);
+      currentOffset += occupancyValue ? scaledValue : 0;
+    }
+  };
+
+  componentDidUpdate = (prevProps) => {
+    const { occupancy } = this.props;
+    if (occupancy !== prevProps.occupancy) this.drawStacks();
+  };
+
+  componentDidMount = () => {
+    this.drawStacks();
+  };
+
+  render() {
+    const { width, height } = this.props;
+    const { canvas } = this;
+    if (canvas) canvas.getContext("2d").clearRect(0, 0, width, height);
+
+    return (
+      <canvas
+        className="bp3-popover-targer"
+        style={{
+          marginRight: 5,
+          width,
+          height,
+        }}
+        width={width}
+        height={height}
+        ref={this.canvasRef}
+      />
+    );
+  }
+}