@czi-sds/data-viz 0.2.0 → 0.3.0

package/dist/index.esm.js

@@ -1,4 +1,7 @@
-import React, { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { init } from 'echarts';
+import { useMemo, useEffect, memo, forwardRef, useState, useRef } from 'react';
+import throttle from 'lodash/throttle';
 import { styled } from '@mui/material/styles';
 
 /******************************************************************************
@@ -15,6 +18,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -27,17 +32,229 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 }
 
-var StyledHeatmap = styled("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100px;\n  background-color: #212121;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  font-size: 1rem;\n"], ["\n  width: 100%;\n  height: 100px;\n  background-color: #212121;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  font-size: 1rem;\n"])));
+var EMPTY_OBJECT = {};
+
+var DEFAULT_ITEM_STYLE = {
+    color: function () {
+        return "rgb(0, 0, 0)";
+    },
+};
+function createChartOptions(_a) {
+    var data = _a.data, xAxisData = _a.xAxisData, yAxisData = _a.yAxisData, width = _a.width, height = _a.height, encode = _a.encode, _b = _a.itemStyle, itemStyle = _b === void 0 ? DEFAULT_ITEM_STYLE : _b, symbolSize = _a.symbolSize, gridProp = _a.grid;
+    var defaultGrid = {
+        height: "".concat(height, "px"),
+        left: 0,
+        top: 0,
+        // (atarashansky): this is the key change to align x and y axis
+        // labels to fixed spacings
+        width: "".concat(width, "px"),
+    };
+    var customGrid = typeof gridProp === "function" ? gridProp(defaultGrid) : gridProp;
+    return {
+        animation: false,
+        /**
+         * Display reference line and axis value under mouse pointer
+         * https://echarts.apache.org/en/option.html#axisPointer
+         */
+        axisPointer: {
+            label: { show: false },
+            show: true,
+            triggerOn: "mousemove",
+        },
+        dataset: {
+            source: data,
+        },
+        grid: customGrid || defaultGrid,
+        series: [
+            {
+                emphasis: {
+                    itemStyle: {
+                        color: "inherit",
+                    },
+                    scale: false,
+                },
+                encode: encode,
+                itemStyle: itemStyle,
+                legendHoverLink: false,
+                symbolSize: symbolSize,
+                type: "scatter",
+            },
+        ],
+        xAxis: [
+            {
+                axisLabel: { fontSize: 0, rotate: 90 },
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                boundaryGap: true,
+                data: xAxisData,
+                splitLine: {
+                    show: false,
+                },
+                type: "category",
+            },
+        ],
+        yAxis: [
+            {
+                axisLabel: { fontSize: 0 },
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                boundaryGap: true,
+                data: yAxisData,
+                splitLine: {
+                    show: false,
+                },
+            },
+        ],
+    };
+}
+
+var UPDATE_THROTTLE_MS = 1 * 100;
+function useUpdateChart(_a) {
+    var chart = _a.chart, data = _a.data, xAxisData = _a.xAxisData, yAxisData = _a.yAxisData, width = _a.width, height = _a.height, encode = _a.encode, itemStyle = _a.itemStyle, symbolSize = _a.symbolSize, grid = _a.grid;
+    var throttledUpdateChart = useMemo(function () {
+        return throttle(function () {
+            if (!chart || !data || !xAxisData || !yAxisData) {
+                return;
+            }
+            // (thuang): resize() needs to be called before setOption() to prevent
+            // TypeError: Cannot read properties of undefined (reading 'shouldBePainted')
+            chart.resize();
+            chart.setOption(createChartOptions({
+                data: data,
+                encode: encode,
+                grid: grid,
+                height: height,
+                itemStyle: itemStyle,
+                symbolSize: symbolSize,
+                width: width,
+                xAxisData: xAxisData,
+                yAxisData: yAxisData,
+            }));
+        }, UPDATE_THROTTLE_MS, 
+        // (thuang): Trailing guarantees that the last call to the function will
+        // be executed
+        { trailing: true });
+    }, [
+        chart,
+        data,
+        xAxisData,
+        yAxisData,
+        width,
+        height,
+        encode,
+        itemStyle,
+        symbolSize,
+        grid,
+    ]);
+    useEffect(function () {
+        return function () { return throttledUpdateChart.cancel(); };
+    }, [throttledUpdateChart]);
+    // Update the charts
+    useEffect(function () {
+        throttledUpdateChart();
+    }, [
+        chart,
+        data,
+        xAxisData,
+        yAxisData,
+        throttledUpdateChart,
+        width,
+        height,
+        encode,
+        itemStyle,
+        symbolSize,
+        grid,
+    ]);
+}
+
+var ChartContainer = styled("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getWidthAndHeight);
+function getWidthAndHeight(_a) {
+    var width = _a.width, height = _a.height;
+    return "\n    width: ".concat(width, "px;\n    height: ").concat(height, "px;\n  ");
+}
 var templateObject_1;
 
-var Heatmap = forwardRef(function (props, ref) {
-    var children = props.children;
-    return (React.createElement(StyledHeatmap, __assign({ ref: ref }, props), children));
-});
+function HeatmapChart(props, ref) {
+    var width = props.width, height = props.height, _a = props.echartsRendererMode, echartsRendererMode = _a === void 0 ? "canvas" : _a, onChartMouseMove = props.onChartMouseMove, xAxisData = props.xAxisData, yAxisData = props.yAxisData, data = props.data, encode = props.encode, itemStyle = props.itemStyle, _b = props.symbolSize, symbolSize = _b === void 0 ? 5 : _b, grid = props.grid, rest = __rest(props, ["width", "height", "echartsRendererMode", "onChartMouseMove", "xAxisData", "yAxisData", "data", "encode", "itemStyle", "symbolSize", "grid"]);
+    if (!width || !height) {
+        throw Error("Chart must have width and height > 0");
+    }
+    var _c = useState(false), isChartInitialized = _c[0], setIsChartInitialized = _c[1];
+    var _d = useState(null), chart = _d[0], setChart = _d[1];
+    var innerRef = useRef(null);
+    // Initialize charts
+    useEffect(function () {
+        var current = innerRef.current;
+        if (!current ||
+            isChartInitialized ||
+            // (thuang): echart's `init()` will throw error if the container has 0 width or height
+            (current === null || current === void 0 ? void 0 : current.getAttribute("height")) === "0" ||
+            (current === null || current === void 0 ? void 0 : current.getAttribute("width")) === "0") {
+            return;
+        }
+        setIsChartInitialized(true);
+        var rawChart = init(current, EMPTY_OBJECT, {
+            renderer: echartsRendererMode,
+            useDirtyRect: true,
+        });
+        if (onChartMouseMove) {
+            rawChart.getZr().on("mousemove", function (event) {
+                onChartMouseMove(event, rawChart);
+            });
+        }
+        setChart(rawChart);
+    }, [innerRef, isChartInitialized, echartsRendererMode, onChartMouseMove]);
+    useUpdateChart({
+        chart: chart,
+        data: data,
+        encode: encode,
+        grid: grid,
+        height: height,
+        itemStyle: itemStyle,
+        symbolSize: symbolSize,
+        width: width,
+        xAxisData: xAxisData,
+        yAxisData: yAxisData,
+    });
+    return (jsx(ChartContainer, __assign({ height: height, width: width, ref: handleRef }, rest)));
+    function handleRef(element) {
+        innerRef.current = element;
+        if (!ref)
+            return;
+        // (thuang): `ref` from `forwardRef` can be a function or a ref object
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else {
+            ref.current = element;
+        }
+    }
+}
+var index = memo(forwardRef(HeatmapChart));
 
-export { Heatmap };
+export { index as HeatmapChart };