@geoblocks/d3-helper - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

lib/cartesian-chart.d.ts

 import { BaseD3ChartSVG, Margins } from './base-d3-chart-svg';
 /**
- * One value of data
+ * Supported axis types. Your axis data must use one of this type.
  */
@@ -8,5 +8,7 @@ export declare type DataValue = (string | number | Date);
  * One row of data.
+ * Type is "any" to accept all kind of data, but for your
+ * axis your data type must be a valid DataValue.
  */
-export interface DataRow {
-    [Key: string]: any;
+export interface DataItem {
+    [key: string]: any;
 }
@@ -111,5 +113,3 @@ /**
     fontSizeForTitle: string;
-    xData: DataValue[];
-    yData: DataValue[];
-    oppositeYData: DataValue[];
+    dataset: DataItem[];
     xScale: any;
@@ -136,2 +136,8 @@ yScale: any;
     /**
+     * Assert dataset is set.
+     * Write an error if there is not any.
+     * @return true if there is a config. False otherwise.
+     */
+    assertDatasetExists(): boolean;
+    /**
      * Remove the svg an reset the cartesian.
@@ -147,31 +153,65 @@ * Keep the current config (no reset).
     /**
-     * Returns the axisColumn after a check if data exist for this axis column key.
+     * Returns name of the x axisColumn from the config.
      */
-    getAxisColumnName(axisConfig: CartesianChartAxisConfig, data: DataRow[]): string;
+    getXColumnName(): string;
     /**
-     * Return the AxisType of the first defined value of the given DataRow.
+     * Returns name of the y axisColumn from the config.
      */
-    getDataType(data: DataRow[], axisColumn: string): AxisType;
+    getYColumnName(): string;
     /**
+     * Returns name of the opposite y axisColumn from the config.
+     */
+    getOppositeYColumnName(): string;
+    /**
+     * Returns value of the x scale for a specific dataItem.
+     * The xScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getXScaleValue(dataItem: any): number;
+    /**
+     * Returns value of the y scale for a specific dataItem.
+     * The yScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getYScaleValue(dataItem: any): number;
+    /**
+     * Returns value of the opposite y scale for a specific dataItem.
+     * The oppositeYScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getOppositeYScaleValue(dataItem: any): number;
+    /**
+     * Returns the axisColumn name after a check if data exist for this axis column key.
+     */
+    getCheckedAxisColumnName(axisConfig: CartesianChartAxisConfig, dataset: DataItem[]): string;
+    /**
+     * Return the AxisType of the first defined value of the given DataItem.
+     */
+    getDataType(dataset: DataItem[], axisColumn: string): AxisType;
+    /**
      * Get a value and return a DataValue or null.
      */
-    castToDataValue(data: any): DataValue;
+    castToDataValue(dataItem: any): DataValue;
     /**
-     * Set and draw the X axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Get an array of casted data (DataValue) from the specified axis.
+     */
+    getAxisData(dataset: DataItem[], axisColumn: string): DataValue[];
+    /**
+     * Set and draw the X axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG element must be drawn before to call this method.
      */
-    setXAxis(data: DataRow[]): void;
+    setXAxis(): void;
     /**
-     * Set and draw the Y axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Set and draw the Y axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG frame must be drawn before to call this method.
      */
-    setYAxis(data: DataRow[]): void;
+    setYAxis(): void;
     /**
-     * Set and draw the opposite Y axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Set and draw the opposite Y axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG frame must be drawn before to call this method.
      */
-    setOppositeYAxis(data: DataRow[]): void;
+    setOppositeYAxis(): void;
     /**
@@ -187,3 +227,3 @@ * Draw a title at the center of the chart.
      */
-    drawXAxis(colors: number[], data: DataRow[]): void;
+    drawXAxis(colors: number[], dataset: DataItem[]): void;
     /**
@@ -194,3 +234,3 @@ * Draw the Y axis in the chart of the svg.
      */
-    drawYAxis(colors: number[], data: DataRow[]): void;
+    drawYAxis(colors: number[], dataset: DataItem[]): void;
     /**
@@ -201,3 +241,3 @@ * Draw the opposite Y axis in the chart of the svg.
      */
-    drawOppositeYAxis(colors: number[], data: DataRow[]): void;
+    drawOppositeYAxis(colors: number[], dataset: DataItem[]): void;
     /**
@@ -215,10 +255,10 @@ * Add line break on too long axis levels labels.
      * @param baseAxis a base axis to add the ticks
-     * @param data Data to determine AxisType
+     * @param dataset Dataset to determine the AxisType
      * @return the axis set with the tick function.
      */
-    setAxisTick(axisConfig: CartesianChartAxisConfig, baseAxis: any, data: DataRow[]): any;
+    setAxisTick(axisConfig: CartesianChartAxisConfig, baseAxis: any, dataset: DataItem[]): any;
     /**
-     * Return a scale function adapted to the type of data of the axis.
+     * Return a scale function adapted to the type of dataset of the axis.
      */
-    getScale(axisData: any, axisType: string, range: number[]): any;
+    getScale(dataset: DataItem[], axisColum: string, axisType: string, range: number[]): any;
     /**
@@ -225,0 +265,0 @@ * Create an array containing the min and the max value determining the domain used for the axis.

lib/cartesian-chart.js

@@ -79,2 +79,14 @@ import { min as d3Min, max as d3Max } from 'd3-array';
     /**
+     * Assert dataset is set.
+     * Write an error if there is not any.
+     * @return true if there is a config. False otherwise.
+     */
+    assertDatasetExists() {
+        if (this.dataset) {
+            return true;
+        }
+        console.error('No dataset. Please assign dataset first');
+        return false;
+    }
+    /**
      * Remove the svg an reset the cartesian.
@@ -85,5 +97,3 @@ * Keep the current config (no reset).
         this.removeSVG();
-        this.xData = null;
-        this.yData = null;
-        this.oppositeYData = null;
+        this.dataset = null;
         this.xScale = null;
@@ -103,5 +113,50 @@ this.yScale = null;
     /**
-     * Returns the axisColumn after a check if data exist for this axis column key.
+     * Returns name of the x axisColumn from the config.
      */
-    getAxisColumnName(axisConfig, data) {
+    getXColumnName() {
+        var _a, _b;
+        return (_b = (_a = this.config_) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.axisColumn;
+    }
+    /**
+     * Returns name of the y axisColumn from the config.
+     */
+    getYColumnName() {
+        var _a, _b;
+        return (_b = (_a = this.config_) === null || _a === void 0 ? void 0 : _a.yAxis) === null || _b === void 0 ? void 0 : _b.axisColumn;
+    }
+    /**
+     * Returns name of the opposite y axisColumn from the config.
+     */
+    getOppositeYColumnName() {
+        var _a, _b;
+        return (_b = (_a = this.config_) === null || _a === void 0 ? void 0 : _a.oppositeYAxis) === null || _b === void 0 ? void 0 : _b.axisColumn;
+    }
+    /**
+     * Returns value of the x scale for a specific dataItem.
+     * The xScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getXScaleValue(dataItem) {
+        return this.xScale(dataItem[this.getXColumnName()]);
+    }
+    /**
+     * Returns value of the y scale for a specific dataItem.
+     * The yScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getYScaleValue(dataItem) {
+        return this.yScale(dataItem[this.getYColumnName()]);
+    }
+    /**
+     * Returns value of the opposite y scale for a specific dataItem.
+     * The oppositeYScale must be defined otherwise an error will be thrown.
+     * For performance purpose, no check are performed.
+     */
+    getOppositeYScaleValue(dataItem) {
+        return this.oppositeYScale(dataItem[this.getOppositeYColumnName()]);
+    }
+    /**
+     * Returns the axisColumn name after a check if data exist for this axis column key.
+     */
+    getCheckedAxisColumnName(axisConfig, dataset) {
         const axisColumn = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.axisColumn;
@@ -111,5 +166,5 @@ if (!axisColumn) {
         }
-        // Check if there exists at least one data point that is not null/undefined for this axis.
-        const dataExists = data.find((elem) => {
-            return elem[axisColumn] !== undefined && elem[axisColumn] !== null;
+        // Check if it exists at least one data point that is not null/undefined for this axis.
+        const dataExists = dataset.find((dataItem) => {
+            return dataItem[axisColumn] !== undefined && dataItem[axisColumn] !== null;
         });
@@ -122,11 +177,11 @@ if (!dataExists) {
     /**
-     * Return the AxisType of the first defined value of the given DataRow.
+     * Return the AxisType of the first defined value of the given DataItem.
      */
-    getDataType(data, axisColumn) {
-        const definedDataRow = data.find(dataRow => dataRow[axisColumn] !== null && dataRow[axisColumn] !== undefined);
-        if (!definedDataRow) {
+    getDataType(dataset, axisColumn) {
+        const definedDataItem = dataset.find(dataItem => dataItem[axisColumn] !== null && dataItem[axisColumn] !== undefined);
+        if (!definedDataItem) {
             console.error(`No value for axisColumn "${axisColumn}"`);
             return AxisType.TEXT;
         }
-        const definedValue = definedDataRow ? definedDataRow[axisColumn] : null;
+        const definedValue = definedDataItem ? definedDataItem[axisColumn] : null;
         if (definedValue instanceof Date) {
@@ -143,5 +198,5 @@ return AxisType.DATE;
      */
-    castToDataValue(data) {
-        if (typeof data === 'string' || typeof data === 'number' || data instanceof Date) {
-            return data;
+    castToDataValue(dataItem) {
+        if (typeof dataItem === 'string' || typeof dataItem === 'number' || dataItem instanceof Date) {
+            return dataItem;
         }
@@ -151,10 +206,15 @@ return null;
     /**
-     * Set and draw the X axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Get an array of casted data (DataValue) from the specified axis.
+     */
+    getAxisData(dataset, axisColumn) {
+        return dataset.map(dataItem => this.castToDataValue(dataItem[axisColumn]));
+    }
+    /**
+     * Set and draw the X axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG element must be drawn before to call this method.
      */
-    setXAxis(data) {
-        this.xData = null;
+    setXAxis() {
         this.xScale = null;
-        if (!this.assertChartExists() || !this.assertConfigExists()) {
+        if (!this.assertChartExists() || !this.assertConfigExists() || !this.assertDatasetExists()) {
             return;
@@ -165,22 +225,20 @@ }
         const axisConfig = this.config_.xAxis;
-        const axisColumn = this.getAxisColumnName(axisConfig, data);
+        const axisColumn = this.getCheckedAxisColumnName(axisConfig, this.dataset);
         if (!axisColumn) {
             return;
         }
-        const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
-        this.xData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
-        this.xScale = this.getScale(this.xData, axisType, [0, drawableWidth]);
+        const axisType = this.getDataType(this.dataset, axisConfig.tickLabelColumn || axisColumn);
+        this.xScale = this.getScale(this.dataset, axisColumn, axisType, [0, drawableWidth]);
         if (!this.config_.xAxis.hideAxis) {
-            this.drawXAxis(axisConfig.color || this.color, data);
+            this.drawXAxis(axisConfig.color || this.color, this.dataset);
         }
     }
     /**
-     * Set and draw the Y axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Set and draw the Y axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG frame must be drawn before to call this method.
      */
-    setYAxis(data) {
-        this.yData = null;
+    setYAxis() {
         this.yScale = null;
-        if (!this.assertChartExists() || !this.assertConfigExists()) {
+        if (!this.assertChartExists() || !this.assertConfigExists() || !this.assertDatasetExists()) {
             return;
@@ -191,22 +249,20 @@ }
         const axisConfig = this.config_.yAxis;
-        const axisColumn = this.getAxisColumnName(axisConfig, data);
+        const axisColumn = this.getCheckedAxisColumnName(axisConfig, this.dataset);
         if (!axisColumn) {
             return;
         }
-        const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
-        this.yData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
-        this.yScale = this.getScale(this.yData, axisType, [drawableHeight, 0]);
+        const axisType = this.getDataType(this.dataset, axisConfig.tickLabelColumn || axisColumn);
+        this.yScale = this.getScale(this.dataset, axisColumn, axisType, [drawableHeight, 0]);
         if (!this.config_.yAxis.hideAxis) {
-            this.drawYAxis(axisConfig.color || this.color, data);
+            this.drawYAxis(axisConfig.color || this.color, this.dataset);
         }
     }
     /**
-     * Set and draw the opposite Y axis using the config and the data.
-     * Type will be determined from data values and must be an Axis Type type.
+     * Set and draw the opposite Y axis using the config and the dataset.
+     * The type will be determined from AxisType type. The axis values must match the type.
      * A config must be set and the SVG frame must be drawn before to call this method.
      */
-    setOppositeYAxis(data) {
-        this.oppositeYData = null;
+    setOppositeYAxis() {
         this.oppositeYScale = null;
-        if (!this.assertChartExists() || !this.assertConfigExists()) {
+        if (!this.assertChartExists() || !this.assertConfigExists() || !this.assertDatasetExists()) {
             return;
@@ -217,11 +273,10 @@ }
         const axisConfig = this.config_.oppositeYAxis;
-        const axisColumn = this.getAxisColumnName(axisConfig, data);
+        const axisColumn = this.getCheckedAxisColumnName(axisConfig, this.dataset);
         if (!axisColumn) {
             return;
         }
-        const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
-        this.oppositeYData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
-        this.oppositeYScale = this.getScale(this.oppositeYData, axisType, [drawableHeight, 0]);
+        const axisType = this.getDataType(this.dataset, axisConfig.tickLabelColumn || axisColumn);
+        this.oppositeYScale = this.getScale(this.dataset, axisColumn, axisType, [drawableHeight, 0]);
         if (!this.config_.oppositeYAxis.hideAxis) {
-            this.drawOppositeYAxis(axisConfig.color || this.color, data);
+            this.drawOppositeYAxis(axisConfig.color || this.color, this.dataset);
         }
@@ -265,3 +320,3 @@ }
      */
-    drawXAxis(colors, data) {
+    drawXAxis(colors, dataset) {
         if (!this.assertChartExists() || !this.assertConfigExists()) {
@@ -275,3 +330,3 @@ return;
         }
-        const axis = this.setAxisTick(this.config_.xAxis, d3AxisBottom(this.xScale), data);
+        const axis = this.setAxisTick(this.config_.xAxis, d3AxisBottom(this.xScale), dataset);
         const [drawableWidth, drawableHeight] = this.getDrawableSize();
@@ -300,3 +355,3 @@ this.chart.append('g')
      */
-    drawYAxis(colors, data) {
+    drawYAxis(colors, dataset) {
         if (!this.assertChartExists() || !this.assertConfigExists()) {
@@ -310,3 +365,3 @@ return;
         }
-        const axis = this.setAxisTick(this.config_.yAxis, d3AxisLeft(this.yScale), data);
+        const axis = this.setAxisTick(this.config_.yAxis, d3AxisLeft(this.yScale), dataset);
         this.chart.append('g')
@@ -332,3 +387,3 @@ .attr('transform', 'translate(0,0)')
      */
-    drawOppositeYAxis(colors, data) {
+    drawOppositeYAxis(colors, dataset) {
         if (!this.assertChartExists() || !this.assertConfigExists()) {
@@ -343,3 +398,3 @@ return;
         const drawableWidth = this.getDrawableSize()[0];
-        const axis = this.setAxisTick(this.config_.oppositeYAxis, d3AxisRight(this.oppositeYScale), data);
+        const axis = this.setAxisTick(this.config_.oppositeYAxis, d3AxisRight(this.oppositeYScale), dataset);
         this.chart.append('g')
@@ -409,12 +464,12 @@ .attr('transform', `translate(${drawableWidth}, 0)`)
      * @param baseAxis a base axis to add the ticks
-     * @param data Data to determine AxisType
+     * @param dataset Dataset to determine the AxisType
      * @return the axis set with the tick function.
      */
-    setAxisTick(axisConfig, baseAxis, data) {
+    setAxisTick(axisConfig, baseAxis, dataset) {
         const ticks = axisConfig.tickNumber || 5;
-        const axisColumn = this.getAxisColumnName(axisConfig, data);
-        const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
+        const axisColumn = this.getCheckedAxisColumnName(axisConfig, dataset);
+        const axisType = this.getDataType(dataset, axisConfig.tickLabelColumn || axisColumn);
         const compareFn = (d) => {
-            const dataRow = data.find(dataRow => this.compareData(dataRow[axisColumn], d));
-            return dataRow ? dataRow[axisConfig.tickLabelColumn || axisColumn] : null;
+            const dataItem = dataset.find(item => this.compareData(item[axisColumn], d));
+            return dataItem ? dataItem[axisConfig.tickLabelColumn || axisColumn] : null;
         };
@@ -440,5 +495,6 @@ if (axisType === AxisType.TEXT) {
     /**
-     * Return a scale function adapted to the type of data of the axis.
+     * Return a scale function adapted to the type of dataset of the axis.
      */
-    getScale(axisData, axisType, range) {
+    getScale(dataset, axisColum, axisType, range) {
+        const axisData = this.getAxisData(dataset, axisColum);
         let scale;
@@ -445,0 +501,0 @@ if (axisType === AxisType.TEXT) {

lib/cartesian-chart.spec.js

@@ -5,3 +5,3 @@ import { CartesianChart, AxisType } from './cartesian-chart';
     let config;
-    const data = [
+    const dataset = [
         { elevation: null, obj: 'rock in the sea', date: null },
@@ -88,9 +88,7 @@ { elevation: 20.5, obj: null, date: new Date('01-31-2019') },
         expect(chart.svg).toBeTruthy();
-        expect(chart.xData).toBeUndefined();
+        expect(chart.dataset).toBeUndefined();
         // Clean
         chart.cleanCartesian();
         expect(chart.svg).toBeNull();
-        expect(chart.xData).toBeNull();
-        expect(chart.yData).toBeNull();
-        expect(chart.oppositeYData).toBeNull();
+        expect(chart.dataset).toBeNull();
         expect(chart.xScale).toBeNull();
@@ -102,3 +100,3 @@ expect(chart.yScale).toBeNull();
         // Base state
-        expect(chart.yData).toBeUndefined();
+        expect(chart.dataset).toBeUndefined();
         expect(chart.svg).toBeUndefined();
@@ -108,20 +106,59 @@ expect(chart.width).toEqual(250);
         chart.removeUpdateDrawSVG();
-        expect(chart.yData).toBeNull();
+        expect(chart.dataset).toBeNull();
         expect(chart.svg).toBeTruthy();
         expect(chart.width).toEqual(400);
     });
-    it('getAxisColumnName', () => {
-        expect(chart.getAxisColumnName(null, data)).toBeNull();
-        expect(chart.getAxisColumnName(config.xAxis, [])).toBeNull();
-        expect(chart.getAxisColumnName(config.xAxis, data)).toEqual('obj');
-        expect(chart.getAxisColumnName(config.yAxis, data)).toEqual('elevation');
-        expect(chart.getAxisColumnName(config.oppositeYAxis, data)).toBeNull();
+    it('getXColumnName', () => {
+        expect(chart.getXColumnName()).toBeUndefined();
+        chart.setConfig(config);
+        expect(chart.getXColumnName()).toEqual('obj');
     });
+    it('getYColumnName', () => {
+        expect(chart.getYColumnName()).toBeUndefined();
+        chart.setConfig(config);
+        expect(chart.getYColumnName()).toEqual('elevation');
+    });
+    it('getOppositeYColumnName', () => {
+        expect(chart.getOppositeYColumnName()).toBeUndefined();
+        config.oppositeYAxis = { axisColumn: 'date' };
+        chart.setConfig(config);
+        expect(chart.getOppositeYColumnName()).toEqual('date');
+    });
+    it('getXScaleValue', () => {
+        chart.setConfig(config);
+        chart.removeUpdateDrawSVG();
+        chart.dataset = dataset;
+        chart.setXAxis();
+        expect(chart.getXScaleValue(dataset[0])).toBeGreaterThan(0);
+    });
+    it('getYScaleValue', () => {
+        chart.setConfig(config);
+        chart.removeUpdateDrawSVG();
+        chart.dataset = dataset;
+        chart.setYAxis();
+        expect(chart.getYScaleValue(dataset[0])).toBeGreaterThan(0);
+    });
+    it('getOppositeYScaleValue', () => {
+        // Set axis and get value again.
+        config.oppositeYAxis = { axisColumn: 'date' };
+        chart.setConfig(config);
+        chart.removeUpdateDrawSVG();
+        chart.dataset = dataset;
+        chart.setOppositeYAxis();
+        expect(chart.getOppositeYScaleValue(dataset[0])).toBeGreaterThan(0);
+    });
+    it('getCheckedAxisColumnName', () => {
+        expect(chart.getCheckedAxisColumnName(null, dataset)).toBeNull();
+        expect(chart.getCheckedAxisColumnName(config.xAxis, [])).toBeNull();
+        expect(chart.getCheckedAxisColumnName(config.xAxis, dataset)).toEqual('obj');
+        expect(chart.getCheckedAxisColumnName(config.yAxis, dataset)).toEqual('elevation');
+        expect(chart.getCheckedAxisColumnName(config.oppositeYAxis, dataset)).toBeNull();
+    });
     it('getDataType', () => {
         disableLogError(); // Silent console.error.
-        expect(chart.getDataType(data, '')).toEqual(AxisType.TEXT);
+        expect(chart.getDataType(dataset, '')).toEqual(AxisType.TEXT);
         enableLogError(); // Enable console.error.
-        expect(chart.getDataType(data, 'obj')).toEqual(AxisType.TEXT);
-        expect(chart.getDataType(data, 'elevation')).toEqual(AxisType.NUMBER);
-        expect(chart.getDataType(data, 'date')).toEqual(AxisType.DATE);
+        expect(chart.getDataType(dataset, 'obj')).toEqual(AxisType.TEXT);
+        expect(chart.getDataType(dataset, 'elevation')).toEqual(AxisType.NUMBER);
+        expect(chart.getDataType(dataset, 'date')).toEqual(AxisType.DATE);
     });
@@ -140,21 +177,24 @@ it('castToDataValue', () => {
     it('setXAxis', () => {
+        // No svg, no draw.
         disableLogError(); // Silent console.error.
-        chart.setXAxis(data);
+        chart.setXAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.xData).toBeNull();
         expect(document.querySelector('.xaxis')).toBeNull();
         // Draw svg, not axis: no axis yet.
         chart.removeUpdateDrawSVG();
-        expect(chart.xData).toBeNull();
         expect(document.querySelector('.xaxis')).toBeNull();
-        // No config, no axis
+        // No config nor dataset, no axis.
         disableLogError(); // Silent console.error.
-        chart.setXAxis(data);
+        chart.setXAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.xData).toBeNull();
         expect(document.querySelector('.xaxis')).toBeNull();
-        // Set config, draw axis.
+        // Config but no dataset, no axis.
         chart.setConfig(config);
-        chart.setXAxis(data);
-        expect(chart.xData).toBeTruthy();
+        disableLogError(); // Silent console.error.
+        chart.setXAxis();
+        enableLogError(); // Enable console.error.
+        expect(document.querySelector('.xaxis')).toBeNull();
+        // Set dataset, draw axis.
+        chart.dataset = dataset;
+        chart.setXAxis();
         expect(chart.xScale).toBeTruthy();
@@ -164,4 +204,3 @@ expect(document.querySelectorAll('.xaxis').length).toEqual(1);
         config.xAxis.hideAxis = true;
-        chart.setXAxis(data);
-        expect(chart.xData).toBeTruthy();
+        chart.setXAxis();
         expect(chart.xScale).toBeTruthy();
@@ -172,4 +211,3 @@ expect(document.querySelector('.xaxis')).toBeNull();
         config.xAxis.axisColumn = 'foo';
-        chart.setXAxis(data);
-        expect(chart.xData).toBeNull();
+        chart.setXAxis();
         expect(document.querySelector('.xaxis')).toBeNull();
@@ -180,20 +218,22 @@ });
         disableLogError(); // Silent console.error.
-        chart.setYAxis(data);
+        chart.setYAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.yData).toBeNull();
         expect(document.querySelector('.yaxis')).toBeNull();
         // Draw svg, not axis: no axis yet.
         chart.removeUpdateDrawSVG();
-        expect(chart.yData).toBeNull();
         expect(document.querySelector('.yaxis')).toBeNull();
-        // No config, no axis
+        // No config nor dataset, no axis.
         disableLogError(); // Silent console.error.
-        chart.setYAxis(data);
+        chart.setYAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.yData).toBeNull();
         expect(document.querySelector('.yaxis')).toBeNull();
-        // Set config, draw axis.
+        // Config but no dataset, no axis.
         chart.setConfig(config);
-        chart.setYAxis(data);
-        expect(chart.yData).toBeTruthy();
+        disableLogError(); // Silent console.error.
+        chart.setYAxis();
+        enableLogError(); // Enable console.error.
+        expect(document.querySelector('.yaxis')).toBeNull();
+        // Set dataset, draw axis.
+        chart.dataset = dataset;
+        chart.setYAxis();
         expect(chart.yScale).toBeTruthy();
@@ -203,4 +243,3 @@ expect(document.querySelectorAll('.yaxis').length).toEqual(1);
         config.yAxis.hideAxis = true;
-        chart.setYAxis(data);
-        expect(chart.yData).toBeTruthy();
+        chart.setYAxis();
         expect(chart.yScale).toBeTruthy();
@@ -211,4 +250,3 @@ expect(document.querySelector('.yaxis')).toBeNull();
         config.yAxis.axisColumn = 'foo';
-        chart.setYAxis(data);
-        expect(chart.yData).toBeNull();
+        chart.setYAxis();
         expect(document.querySelector('.yaxis')).toBeNull();
@@ -219,21 +257,23 @@ });
         disableLogError(); // Silent console.error.
-        chart.setOppositeYAxis(data);
+        chart.setOppositeYAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.oppositeYData).toBeNull();
         expect(document.querySelector('.opposite-yaxis')).toBeNull();
         // Draw svg, not axis: no axis yet.
         chart.removeUpdateDrawSVG();
-        expect(chart.oppositeYData).toBeNull();
         expect(document.querySelector('.opposite-yaxis')).toBeNull();
-        // No config, no axis
+        // No config nor dataset, no axis.
         disableLogError(); // Silent console.error.
-        chart.setOppositeYAxis(data);
+        chart.setOppositeYAxis();
         enableLogError(); // Enable console.error.
-        expect(chart.oppositeYData).toBeNull();
         expect(document.querySelector('.opposite-yaxis')).toBeNull();
-        // Set config, draw axis.
+        // Config but no dataset, no axis.
         config.oppositeYAxis = { axisColumn: 'date' };
         chart.setConfig(config);
-        chart.setOppositeYAxis(data);
-        expect(chart.oppositeYData).toBeTruthy();
+        disableLogError(); // Silent console.error.
+        chart.setOppositeYAxis();
+        enableLogError(); // Enable console.error.
+        expect(document.querySelector('.opposite-yaxis')).toBeNull();
+        // Set dataset, draw axis.
+        chart.dataset = dataset;
+        chart.setOppositeYAxis();
         expect(chart.oppositeYScale).toBeTruthy();
@@ -243,4 +283,3 @@ expect(document.querySelectorAll('.opposite-yaxis').length).toEqual(1);
         config.oppositeYAxis.hideAxis = true;
-        chart.setOppositeYAxis(data);
-        expect(chart.oppositeYData).toBeTruthy();
+        chart.setOppositeYAxis();
         expect(chart.oppositeYScale).toBeTruthy();
@@ -251,4 +290,3 @@ expect(document.querySelector('.opposite-yaxis')).toBeNull();
         config.oppositeYAxis.axisColumn = 'foo';
-        chart.setOppositeYAxis(data);
-        expect(chart.oppositeYData).toBeNull();
+        chart.setOppositeYAxis();
         expect(document.querySelector('.opposite-yaxis')).toBeNull();
@@ -284,3 +322,3 @@ });
         disableLogError(); // Silent console.error.
-        chart.drawXAxis(chart.color, data);
+        chart.drawXAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -293,3 +331,3 @@ expect(document.querySelector('.xaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawXAxis(chart.color, data);
+        chart.drawXAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -300,10 +338,9 @@ expect(document.querySelector('.xaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawXAxis(chart.color, data);
+        chart.drawXAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
         expect(document.querySelector('.xaxis')).toBeNull();
         // Draw axis (twice, must result only one xaxis).
-        const xData = data.map(dataRow => dataRow[config.xAxis.axisColumn]);
-        chart.xScale = chart.getScale(xData, AxisType.TEXT, [0, 100]);
-        chart.drawXAxis(chart.color, data);
-        chart.drawXAxis(chart.color, data);
+        chart.xScale = chart.getScale(dataset, chart.getXColumnName(), AxisType.TEXT, [0, 100]);
+        chart.drawXAxis(chart.color, dataset);
+        chart.drawXAxis(chart.color, dataset);
         expect(document.querySelectorAll('.xaxis').length).toEqual(1);
@@ -314,3 +351,3 @@ });
         disableLogError(); // Silent console.error.
-        chart.drawYAxis(chart.color, data);
+        chart.drawYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -323,3 +360,3 @@ expect(document.querySelector('.yaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawYAxis(chart.color, data);
+        chart.drawYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -330,10 +367,9 @@ expect(document.querySelector('.yaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawYAxis(chart.color, data);
+        chart.drawYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
         expect(document.querySelector('.yaxis')).toBeNull();
         // Draw axis (twice, must result only one yaxis).
-        const yData = data.map(dataRow => dataRow[config.yAxis.axisColumn]);
-        chart.yScale = chart.getScale(yData, AxisType.NUMBER, [0, 100]);
-        chart.drawYAxis(chart.color, data);
-        chart.drawYAxis(chart.color, data);
+        chart.yScale = chart.getScale(dataset, chart.getYColumnName(), AxisType.NUMBER, [0, 100]);
+        chart.drawYAxis(chart.color, dataset);
+        chart.drawYAxis(chart.color, dataset);
         expect(document.querySelectorAll('.yaxis').length).toEqual(1);
@@ -344,3 +380,3 @@ });
         disableLogError(); // Silent console.error.
-        chart.drawOppositeYAxis(chart.color, data);
+        chart.drawOppositeYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -353,3 +389,3 @@ expect(document.querySelector('.opposite-yaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawOppositeYAxis(chart.color, data);
+        chart.drawOppositeYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
@@ -361,10 +397,9 @@ expect(document.querySelector('.opposite-yaxis')).toBeNull();
         disableLogError(); // Silent console.error.
-        chart.drawOppositeYAxis(chart.color, data);
+        chart.drawOppositeYAxis(chart.color, dataset);
         enableLogError(); // Enable console.error.
         expect(document.querySelector('.opposite-yaxis')).toBeNull();
         // Draw axis (twice, must result only one oppositeYaxis).
-        const oppositeYData = data.map(dataRow => dataRow[config.oppositeYAxis.axisColumn]);
-        chart.oppositeYScale = chart.getScale(oppositeYData, AxisType.DATE, [0, 100]);
-        chart.drawOppositeYAxis(chart.color, data);
-        chart.drawOppositeYAxis(chart.color, data);
+        chart.oppositeYScale = chart.getScale(dataset, chart.getOppositeYColumnName(), AxisType.DATE, [0, 100]);
+        chart.drawOppositeYAxis(chart.color, dataset);
+        chart.drawOppositeYAxis(chart.color, dataset);
         expect(document.querySelectorAll('.opposite-yaxis').length).toEqual(1);
@@ -376,3 +411,4 @@ });
         chart.removeUpdateDrawSVG();
-        chart.setXAxis(data);
+        chart.dataset = dataset;
+        chart.setXAxis();
         let textGroup = chart.chart.selectAll('.xaxis .tick text');
@@ -379,0 +415,0 @@ chart.wrapAxisLabels(textGroup, 30, 0);

package.json

 {
   "name": "@geoblocks/d3-helper",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "d3 helper classes",
@@ -34,3 +34,3 @@ "license": "BSD-3-Clause",
     "build-only": "tsc --pretty",
-    "doc": "typedoc --out apidoc --theme minimal --readme none --hideGenerator --listInvalidSymbolLinks --toc none",
+    "doc": "typedoc src --out apidoc --theme minimal --readme none --hideGenerator --listInvalidSymbolLinks --toc none",
     "lint": "tslint src/*.ts",
@@ -41,26 +41,26 @@ "start": "parcel serve --port 8080 examples/*.html --public-url /",
   "dependencies": {
-    "d3-array": "^2.4.0",
-    "d3-axis": "^1.0.12",
-    "d3-format": "^1.4.4",
-    "d3-scale": "^3.2.1",
-    "d3-selection": "^1.4.1",
-    "d3-time-format": "^2.2.3"
+    "d3-array": "^2.11.0",
+    "d3-axis": "^2.0.0",
+    "d3-format": "^2.0.0",
+    "d3-scale": "^3.2.3",
+    "d3-selection": "^2.0.0",
+    "d3-time-format": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-typescript": "^7.10.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.12.7",
     "@geoblocks/base": "^0.1.1",
-    "@types/jest": "^26.0.0",
-    "babel-jest": "^26.0.1",
-    "d3-shape": "^1.3.7",
-    "d3-transition": "^1.3.2",
-    "jest": "^26.0.1",
+    "@types/jest": "^26.0.20",
+    "babel-jest": "^26.6.3",
+    "d3-shape": "^2.0.0",
+    "d3-transition": "^2.0.0",
+    "jest": "^26.6.3",
     "parcel-bundler": "^1.12.4",
-    "tslib": "^1.10.0",
-    "tslint": "^6.1.2",
+    "tslib": "^2.1.0",
+    "tslint": "^6.1.3",
     "tslint-config-airbnb": "^5.11.2",
     "tslint-consistent-codestyle": "^1.16.0",
-    "typedoc": "^0.17.7",
-    "typescript": "^3.9.5"
+    "typedoc": "^0.20.19",
+    "typescript": "^4.1.3"
   }
 }

README.md

@@ -6,3 +6,3 @@ # d3-helper
 This library provides some classes and functions for common operations with the d3 library.
-It let you able to manage your charts as you want.
+It let you manage charts as you want.
 
@@ -9,0 +9,0 @@ ## Use the code in a project.

No alert changes

Improved metrics

Total package byte prevSize

113996

increased by6.43%

Lines of code

1582

increased by9.1%

Dependency changes

• + Addedd3-axis@2.1.0(transitive)

• + Addedd3-format@2.0.0(transitive)

• + Addedd3-selection@2.0.0(transitive)

• + Addedd3-time-format@3.0.0(transitive)

• - Removedd3-axis@1.0.12(transitive)

• - Removedd3-format@1.4.5(transitive)

• - Removedd3-selection@1.4.2(transitive)

• - Removedd3-time@1.1.0(transitive)

• - Removedd3-time-format@2.3.0(transitive)

• Updatedd3-array@^2.11.0

• Updatedd3-axis@^2.0.0

• Updatedd3-format@^2.0.0

• Updatedd3-scale@^3.2.3

• Updatedd3-selection@^2.0.0

• Updatedd3-time-format@^3.0.0