feat(HeatMapChartD3): creating HeatMapChart with d3.js

configs/jest.config.js

@@ -24,7 +24,8 @@ module.exports = {
         '^wrappers$': '<rootDir>/src/wrappers/',
         '^configs$': '<rootDir>/src/configs.js',
         '^hooks$': '<rootDir>/src/hooks/',
-        '^components$': '<rootDir>/src/index.ts'
+        '^components$': '<rootDir>/src/index.ts',
+        d3: '<rootDir>/node_modules/d3/dist/d3.min.js'
     },
     setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
     testMatch: ['**/?(*.)+(test).tsx'], // TODO add .ts also for helpers

package.json

@@ -86,6 +86,7 @@
         "@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
         "@storybook/react-webpack5": "^7.6.15",
         "@storybook/theming": "^7.6.15",
+        "@types/d3": "^7.4.3",
         "@types/enzyme-adapter-react-16": "^1.0.9",
         "@types/jest": "^29.5.11",
         "autoprefixer": "^10.4.13",
@@ -158,6 +159,7 @@
     "dependencies": {
         "@floating-ui/react": "^0.26.16",
         "classnames": "^2.3.2",
+        "d3": "^7.9.0",
         "dayjs": "^1.11.5",
         "draft-js": "^0.11.7",
         "draftjs-to-html": "^0.9.1",

src/index.ts

@@ -82,7 +82,8 @@ export {
     DonutChart,
     ScatterChart,
     HeatMapChart,
-    ColumnRangeChart
+    ColumnRangeChart,
+    HeatMapChartD3
 } from './lib/molecules/Charts';
 export { default as Widget } from './lib/molecules/Widget';
 export { default as Progress } from './lib/molecules/Progress';

src/lib/molecules/Charts/HeatMapChartD3/HeatMapChartD3.scss

@@ -0,0 +1,112 @@
+@import 'src/assets/styles/variables';
+
+.heatMap {
+    display: flex;
+    justify-content: center;
+    background-color: var(--background);
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        width: 100%;
+    }
+
+    &__title {
+        font-size: rem(18);
+        color: c(foreground);
+        text-overflow: ellipsis;
+        max-width: 70%;
+        overflow: hidden;
+    }
+
+    &__subTitle {
+        font-size: rem(12);
+        color: c(foreground, 0.7);
+        margin-top: rem(8);
+        text-overflow: ellipsis;
+        max-width: 70%;
+        overflow: hidden;
+    }
+
+    &__canvasContainer {
+        display: flex;
+        height: 100%;
+
+        &_direction {
+            &_horizontal {
+                width: 100%;
+                margin-top: rem(16);
+            }
+
+            &_vertical {
+                flex: 1;
+                flex-direction: column;
+                height: 100%;
+            }
+        }
+    }
+
+    &__canvasWrapper {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+    }
+
+    &__canvas {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    &__labels {
+        display: flex;
+
+        &_direction {
+            &_x {
+                margin: rem(8) 0;
+
+                &__text {
+                    flex: 1;
+                }
+            }
+
+            &_y {
+                flex-direction: column;
+                justify-content: space-around;
+                margin: 0 rem(16) rem(30) rem(4);
+            }
+        }
+
+        &__text {
+            color: c(foreground);
+            font-size: rem(11);
+            line-height: rem(14);
+            text-align: center;
+        }
+    }
+
+    &__loader {
+        > .icon {
+            margin: auto;
+        }
+    }
+
+    &__empty {
+        > .icon {
+            margin: auto;
+        }
+    }
+
+    &__tooltip {
+        background-color: sc(b, 0.8);
+        color: c(b);
+        font-size: 12px;
+        font-weight: 600;
+        padding: 8px;
+        text-wrap: nowrap;
+    }
+}

src/lib/molecules/Charts/HeatMapChartD3/HeatMapChartD3.stories.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react';
+import { Meta } from '@storybook/react';
+
+// Helpers
+import { args, category } from '../../../../../stories/assets/storybook.globals';
+
+// Components
+import HeatMapChartD3 from './HeatMapChartD3';
+
+// Types
+import { IHeatMapChartD3Props } from './HeatMapChartD3';
+
+// Data
+import { colorBreakpoints, data, HeadMapChartIndAxesData } from '../../../../../stories/__data__/HeatMapChartD3';
+
+const tooltipFormatter = (a, b, c) => `<b>${a}</b> gwei on <br><b>${b}</b> at <b>${c}</b>`;
+
+const legendAppearances = {
+    vertical: 'vertical',
+    horizontal: 'horizontal'
+};
+
+const meta: Meta<typeof HeatMapChartD3> = {
+    title: 'Charts/HeatMapChartD3',
+    component: HeatMapChartD3,
+    argTypes: {
+        title: args({ control: 'text', category: category.content }),
+        chartHeight: args({ control: 'text', category: category.appearance }),
+        subTitle: args({ control: 'text', category: category.content }),
+        enabledLegend: args({ control: 'boolean', category: category.states }),
+        data: args({ control: 'object', category: category.content }),
+        colorBreakpoints: args({ control: 'object', category: category.appearance }),
+        legendThresholds: args({ control: 'number', category: category.appearance }),
+        tooltipFormatter: args({ control: false, category: category.action }),
+        legendLayout: args({ control: 'select', options: legendAppearances, category: category.appearance }),
+        xAxisCategories: args({ control: 'object', category: category.content }),
+        yAxisCategories: args({ control: 'object', category: category.content }),
+        reverseYAxisOrder: args({ control: 'boolean', category: category.appearance }),
+        legendHeight: args({ control: 'text', category: category.appearance }),
+        isLoading: args({ control: 'boolean', category: category.states }),
+        emptyText: args({ control: 'text', category: category.content })
+    },
+    args: {
+        chartHeight: '700px',
+        title: 'Title',
+        tooltipFormatter: tooltipFormatter,
+        subTitle: 'subTitle',
+        enabledLegend: true,
+        data,
+        xAxisCategories: HeadMapChartIndAxesData.XAxisData,
+        yAxisCategories: HeadMapChartIndAxesData.YAxisData,
+        colorBreakpoints,
+        isLoading: false,
+        legendThresholds: 5,
+        emptyText: 'No data to display'
+    }
+};
+
+export default meta;
+
+const Template: FC<IHeatMapChartD3Props> = (args) => <HeatMapChartD3 {...args} />;
+
+export const Default = Template.bind({});

src/lib/molecules/Charts/HeatMapChartD3/HeatMapChartD3.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ReactWrapper, mount } from 'enzyme';
+import HeatMapChartD3, { IHeatMapChartD3Props } from './HeatMapChartD3';
+import { LegendAppearances } from './Legend';
+import { colorBreakpoints, data, HeadMapChartIndAxesData } from '../../../../../stories/__data__/HeatMapChartD3';
+import GeneUIProvider from '../../../providers/GeneUIProvider';
+
+export const title = 'Test title';
+export const subTitle = 'Test sub title';
+export const emptyText = 'No data to display';
+
+describe('HeatMapChartD3', () => {
+    let setup: ReactWrapper<IHeatMapChartD3Props>;
+
+    beforeEach(() => {
+        setup = mount(
+            <HeatMapChartD3
+                data={data}
+                xAxisCategories={HeadMapChartIndAxesData.XAxisData}
+                yAxisCategories={HeadMapChartIndAxesData.YAxisData}
+                title={title}
+                subTitle={subTitle}
+            />,
+            { wrappingComponent: GeneUIProvider }
+        );
+    });
+
+    it('renders without crashing', () => {
+        expect(setup.exists()).toBeTruthy();
+    });
+
+    it('renders title prop correctly', () => {
+        expect(setup.find('.heatMap__title').text()).toEqual(title);
+    });
+
+    it('renders sub title prop correctly', () => {
+        expect(setup.find('.heatMap__subTitle').text()).toEqual(subTitle);
+    });
+
+    it('should have data property', () => {
+        expect((setup.props().data?.length ?? 0) > 0).toBeTruthy();
+    });
+
+    it('should have colorBreakpoints property', () => {
+        setup.setProps({ colorBreakpoints });
+        expect(setup.props().colorBreakpoints).toEqual(colorBreakpoints);
+    });
+
+    it('should have xAxisCategories property', () => {
+        expect(setup.props().xAxisCategories).toEqual(HeadMapChartIndAxesData.XAxisData);
+    });
+
+    it('should have yAxisCategories property', () => {
+        expect(setup.props().yAxisCategories).toEqual(HeadMapChartIndAxesData.YAxisData);
+    });
+
+    it('renders canvas', () => {
+        expect(setup.find('.heatMap__canvasWrapper').exists()).toBeTruthy();
+    });
+
+    it('renders legend vertical', () => {
+        setup.setProps({ enabledLegend: true });
+        expect(setup.find('.legend').exists()).toBeTruthy();
+    });
+
+    it('renders legend horizontally', () => {
+        setup.setProps({ enabledLegend: true, legendLayout: LegendAppearances.Horizontal });
+        expect(setup.find('.legend_direction_horizontal').exists()).toBeTruthy();
+    });
+
+    it('renders legend with correct thresholds', () => {
+        const count = 3;
+        setup.setProps({ enabledLegend: true, legendThresholds: count });
+        const thresholds = setup.find('div.legend > div.legend__yAxis');
+        expect(thresholds.childAt(count - 1).exists()).toBeTruthy();
+        expect(thresholds.childAt(count).exists()).toBeFalsy();
+    });
+
+    it('renders loading correctly', () => {
+        setup.setProps({ isLoading: true });
+        expect(setup.find('.bc-icon-loader').exists()).toBeTruthy();
+    });
+
+    it('renders empty content correctly', () => {
+        setup.setProps({ data: undefined, emptyText });
+        expect(setup.find('.empty-state-title').text()).toEqual(emptyText);
+    });
+});