New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@geoblocks/d3-helper

Package Overview
Dependencies
Maintainers
5
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@geoblocks/d3-helper - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

lib/base-d3-chart-svg.spec.d.ts
lib/base-d3-chart-svg.spec.js
lib/base-d3-chart-svg.spec.js.map
lib/cartesian-chart.spec.d.ts
lib/cartesian-chart.spec.js
lib/cartesian-chart.spec.js.map
lib/utils.spec.d.ts
lib/utils.spec.js
lib/utils.spec.js.map
LICENCE

14

lib/base-d3-chart-svg.d.ts

@@ -44,4 +44,9 @@ /**

*/
updateSize(element: Element): void;
updateSize(): void;
/**
* Draw the SVG with a 'chart' group inside.
* The element will always preserve its ratio.
*/
drawSVG(): void;
/**
* Remove de SVG.

@@ -51,6 +56,7 @@ */

/**
* Draw the SVG with a 'chart' group inside.
* The element will always preserve its ratio.
* Assert there is a svg and chart element.
* Write an error if there is not any.
* @return true if there is a chart. False otherwise.
*/
drawSVG(): void;
assertChartExists(): boolean;
}

29

lib/base-d3-chart-svg.js

@@ -46,3 +46,4 @@ import { select as d3Select } from 'd3-selection';

*/
updateSize(element) {
updateSize() {
const element = document.querySelector(this.d3Selector_);
this.width = element.offsetWidth;

@@ -52,8 +53,2 @@ this.height = element.offsetHeight;

/**
* Remove de SVG.
*/
removeSVG() {
d3Select(`${this.d3Selector_} svg`).remove();
}
/**
* Draw the SVG with a 'chart' group inside.

@@ -72,3 +67,23 @@ * The element will always preserve its ratio.

}
/**
* Remove de SVG.
*/
removeSVG() {
d3Select(`${this.d3Selector_} svg`).remove();
this.chart = null;
this.svg = null;
}
/**
* Assert there is a svg and chart element.
* Write an error if there is not any.
* @return true if there is a chart. False otherwise.
*/
assertChartExists() {
if (this.svg && this.chart) {
return true;
}
console.error('No SVG element. Please call method drawSVG first');
return false;
}
}
//# sourceMappingURL=base-d3-chart-svg.js.map

64

lib/cartesian-chart.d.ts

@@ -69,2 +69,7 @@ import { BaseD3ChartSVG, Margins } from './base-d3-chart-svg';

/**
* The exact html class that should contain the chart.
* This config is needed when there are two widgets on the same report containing the same chart.
*/
chartPath?: string;
/**
* Reference color to use on titles, axis titles, etc.

@@ -78,10 +83,9 @@ */

/**
* Secondary opposite Axis configuration. Will need a second dataset to setup the axis.
* Font size for axis. Default to 1rem.
*/
oppositeYAxis?: CartesianChartAxisConfig;
fontSizeForAxis?: string;
/**
* The exact html class that should contain the chart.
* This config is needed when there are two widgets on the same report containing the same chart.
* Font size for title and subtitle. Default to 1.1rem.
*/
chartPath?: string;
fontSizeForTitle?: string;
/**

@@ -92,2 +96,6 @@ * Margins are used to display axis. If an axis is hidden, you can but probably won't update the margins.

/**
* Secondary opposite Axis configuration. Will need a second dataset to setup the axis.
*/
oppositeYAxis?: CartesianChartAxisConfig;
/**
* An optional title.

@@ -103,2 +111,4 @@ */

color: number[];
fontSizeForAxis: string;
fontSizeForTitle: string;
xData: DataValue[];

@@ -122,3 +132,10 @@ yData: DataValue[];

/**
* Assert there is a config set.
* Write an error if there is not any.
* @return true if there is a config. False otherwise.
*/
assertConfigExists(): boolean;
/**
* Remove the svg an reset the cartesian.
* Keep the current config (no reset).
*/

@@ -132,6 +149,5 @@ cleanCartesian(): void;

/**
* Returns the axisColumn.
* If data are given, check if the column exists. Returns null if that's not the case.
* Returns the axisColumn after a check if data exist for this axis column key.
*/
getAxisColumnName(axisConfig: CartesianChartAxisConfig, data?: DataRow[]): string;
getAxisColumnName(axisConfig: CartesianChartAxisConfig, data: DataRow[]): string;
/**

@@ -148,2 +164,3 @@ * Return the AxisType of the first defined value of the given DataRow.

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG element must be drawn before to call this method.
*/

@@ -154,2 +171,3 @@ setXAxis(data: DataRow[]): void;

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG frame must be drawn before to call this method.
*/

@@ -160,2 +178,3 @@ setYAxis(data: DataRow[]): void;

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG frame must be drawn before to call this method.
*/

@@ -165,2 +184,3 @@ setOppositeYAxis(data: DataRow[]): void;

* Draw a title at the center of the chart.
* A config must be set and the SVG frame must be drawn before to call this method.
*/

@@ -170,12 +190,24 @@ drawTitle(colors: number[], subTitle?: string): void;

* Draw the X axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The xScale must be set.
*/
drawXAxis(colors: number[], data?: DataRow[]): void;
drawXAxis(colors: number[], data: DataRow[]): void;
/**
* Draw the X axis in the chart of the svg.
* Draw the Y axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The yScale must be set.
*/
drawYAxis(colors: number[], data?: DataRow[]): void;
drawYAxis(colors: number[], data: DataRow[]): void;
/**
* Draw the opposite Y axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The oppositeYScale must be set.
*/
drawOppositeYAxis(colors: number[], data?: DataRow[]): void;
drawOppositeYAxis(colors: number[], data: DataRow[]): void;
/**
* Add line break on too long axis levels labels.
* @param text A d3 text element to wrap.
* @param width Max width available for the text.
* @param x the x value to shift the element (to avoid overlaping the axis).
*/
wrapAxisLabels(text: any, width: number, x: number): void;

@@ -187,4 +219,5 @@ /**

* @param data Data to determine AxisType
* @return the axis set with the tick function.
*/
setAxisTick(axisConfig: CartesianChartAxisConfig, baseAxis: any, data: DataRow[]): void;
setAxisTick(axisConfig: CartesianChartAxisConfig, baseAxis: any, data: DataRow[]): any;
/**

@@ -197,2 +230,4 @@ * Return a scale function adapted to the type of data of the axis.

* Can use a buffer around the value to create new max and min values around the given value.
* On numbers, buffer is 1% of the value.
* On date, it's 15 days.
*/

@@ -202,2 +237,3 @@ determineDomain(minValue: number | Date, maxValue: number | Date): (number | Date)[];

* Use the name of the key of the data of the axis as axis label if no label is configured for this axis.
* A config must be set.
*/

@@ -212,3 +248,3 @@ useDataLabelAsDefaultForAxis(axis: string): void;

/**
* Determine if a given value from the x or y axes can be found in one given data entry
* Compare two value of the same type. Return True if they are defined and match.
* @param axisColumnName: the base value.

@@ -215,0 +251,0 @@ * @param selectedValue the value to compare with.

186

lib/cartesian-chart.js

@@ -8,3 +8,2 @@ import { min as d3Min, max as d3Max } from 'd3-array';

import { BaseD3ChartSVG } from './base-d3-chart-svg';
import { getRoundedNumber } from './utils';
/**

@@ -26,2 +25,4 @@ * Defines the possible types that an axis in a cartesian chart can have.

this.color = [100, 100, 100];
this.fontSizeForAxis = '1rem';
this.fontSizeForTitle = '1.1rem';
}

@@ -48,3 +49,5 @@ /**

}
if (this.config_.yAxis.hideAxis) {
if (this.config_.oppositeYAxis ?
this.config_.yAxis.hideAxis && this.config_.oppositeYAxis.hideAxis :
this.config_.yAxis.hideAxis) {
this.margins.top = 5;

@@ -59,5 +62,24 @@ this.margins.bottom = 5;

}
if (this.config_.fontSizeForAxis) {
this.fontSizeForAxis = this.config_.fontSizeForAxis;
}
if (this.config_.fontSizeForTitle) {
this.fontSizeForTitle = this.config_.fontSizeForTitle;
}
}
/**
* Assert there is a config set.
* Write an error if there is not any.
* @return true if there is a config. False otherwise.
*/
assertConfigExists() {
if (this.config_) {
return true;
}
console.error('No config. Please call method setConfig first');
return false;
}
/**
* Remove the svg an reset the cartesian.
* Keep the current config (no reset).
*/

@@ -78,16 +100,21 @@ cleanCartesian() {

removeUpdateDrawSVG() {
const element = document.querySelector(this.getD3Selector());
this.cleanCartesian();
this.updateSize(element);
this.updateSize();
this.drawSVG();
}
/**
* Returns the axisColumn.
* If data are given, check if the column exists. Returns null if that's not the case.
* Returns the axisColumn after a check if data exist for this axis column key.
*/
getAxisColumnName(axisConfig, data) {
const axisColumn = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.axisColumn;
if (data && data.length > 0 && (data[0][axisColumn] === undefined || data[0][axisColumn] === null)) {
if (!axisColumn) {
return null;
}
// 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;
});
if (!dataExists) {
return null;
}
return axisColumn;

@@ -99,4 +126,8 @@ }

getDataType(data, axisColumn) {
const definedValues = data.find(dataRow => dataRow[axisColumn] !== null && dataRow[axisColumn] !== undefined);
const definedValue = definedValues[axisColumn];
const definedDataRow = data.find(dataRow => dataRow[axisColumn] !== null && dataRow[axisColumn] !== undefined);
if (!definedDataRow) {
console.error(`No value for axisColumn "${axisColumn}"`);
return AxisType.TEXT;
}
const definedValue = definedDataRow ? definedDataRow[axisColumn] : null;
if (definedValue instanceof Date) {

@@ -122,5 +153,11 @@ return AxisType.DATE;

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG element must be drawn before to call this method.
*/
setXAxis(data) {
d3Select(`${this.getD3Selector()} svg .xaxis`).remove();
this.xData = null;
this.xScale = null;
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.xaxis').remove();
const drawableWidth = this.getDrawableSize()[0];

@@ -133,3 +170,3 @@ const axisConfig = this.config_.xAxis;

const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
this.xData = data.map(value => this.castToDataValue(value[axisColumn]));
this.xData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
this.xScale = this.getScale(this.xData, axisType, [0, drawableWidth]);

@@ -143,5 +180,11 @@ if (!this.config_.xAxis.hideAxis) {

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG frame must be drawn before to call this method.
*/
setYAxis(data) {
d3Select(`${this.getD3Selector()} svg .yaxis`).remove();
this.yData = null;
this.yScale = null;
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.yaxis').remove();
const drawableHeight = this.getDrawableSize()[1];

@@ -154,3 +197,3 @@ const axisConfig = this.config_.yAxis;

const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
this.yData = data.map(value => this.castToDataValue(value[axisColumn]));
this.yData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
this.yScale = this.getScale(this.yData, axisType, [drawableHeight, 0]);

@@ -164,5 +207,11 @@ if (!this.config_.yAxis.hideAxis) {

* Type will be determined from data values and must be an Axis Type type.
* A config must be set and the SVG frame must be drawn before to call this method.
*/
setOppositeYAxis(data) {
d3Select(`${this.getD3Selector()} svg .opposite-yaxis`).remove();
this.oppositeYData = null;
this.oppositeYScale = null;
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.opposite-yaxis').remove();
const drawableHeight = this.getDrawableSize()[1];

@@ -175,11 +224,19 @@ const axisConfig = this.config_.oppositeYAxis;

const axisType = this.getDataType(data, axisConfig.tickLabelColumn || axisColumn);
this.oppositeYData = data.map(value => this.castToDataValue(value[axisColumn]));
this.oppositeYData = data.map(dataRow => this.castToDataValue(dataRow[axisColumn]));
this.oppositeYScale = this.getScale(this.oppositeYData, axisType, [drawableHeight, 0]);
this.drawOppositeYAxis(axisConfig.color || this.color, data);
if (!this.config_.oppositeYAxis.hideAxis) {
this.drawOppositeYAxis(axisConfig.color || this.color, data);
}
}
/**
* Draw a title at the center of the chart.
* A config must be set and the SVG frame must be drawn before to call this method.
*/
drawTitle(colors, subTitle) {
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
const title = this.config_.title;
this.svg.select('.title').remove();
this.svg.select('.subtitle').remove();
this.svg.append('text')

@@ -189,6 +246,9 @@ .attr('class', 'title')

.attr('y', this.margins.top / 2)
.attr('font-size', '1.2rem')
.attr('font-size', this.fontSizeForTitle)
.attr('fill', `rgb(${colors.join(',')})`)
.style('text-anchor', 'middle')
.text(title);
if (!subTitle) {
return;
}
this.svg.append('text')

@@ -198,3 +258,3 @@ .attr('class', 'subtitle')

.attr('y', this.margins.top / 2)
.attr('font-size', '1.2rem')
.attr('font-size', this.fontSizeForTitle)
.attr('fill', `rgb(${colors.join(',')})`)

@@ -206,4 +266,14 @@ .style('text-anchor', 'middle')

* Draw the X axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The xScale must be set.
*/
drawXAxis(colors, data) {
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.xaxis').remove();
if (!this.xScale) {
console.error('No xScale to draw x axis.');
return;
}
const axis = this.setAxisTick(this.config_.xAxis, d3AxisBottom(this.xScale), data);

@@ -221,6 +291,6 @@ const [drawableWidth, drawableHeight] = this.getDrawableSize();

.style('text-anchor', 'middle')
.style('font-size', '1.1em')
.style('font-size', this.fontSizeForAxis)
.text(this.config_.xAxis.label);
this.chart.selectAll('.xaxis .tick text')
.call(this.wrapAxisLabels, this.margins.bottom - 15, 0)
.call(this.wrapAxisLabels.bind(this), this.margins.bottom - 15, 0)
.attr('transform', 'translate(0, 8) rotate(-36)')

@@ -230,5 +300,15 @@ .attr('text-anchor', 'end');

/**
* Draw the X axis in the chart of the svg.
* Draw the Y axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The yScale must be set.
*/
drawYAxis(colors, data) {
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.yaxis').remove();
if (!this.yScale) {
console.error('No yScale to draw y axis.');
return;
}
const axis = this.setAxisTick(this.config_.yAxis, d3AxisLeft(this.yScale), data);

@@ -245,11 +325,21 @@ this.chart.append('g')

.style('text-anchor', 'end')
.style('font-size', '1.1em')
.style('font-size', this.fontSizeForAxis)
.text(this.config_.yAxis.label);
this.chart.selectAll('.yaxis .tick text')
.call(this.wrapAxisLabels, this.margins.left - 15, -10);
.call(this.wrapAxisLabels.bind(this), this.margins.left - 15, -10);
}
/**
* Draw the opposite Y axis in the chart of the svg.
* A config must be set and the SVG frame must be drawn before to call this method.
* The oppositeYScale must be set.
*/
drawOppositeYAxis(colors, data) {
if (!this.assertChartExists() || !this.assertConfigExists()) {
return;
}
this.chart.select('.opposite-yaxis').remove();
if (!this.oppositeYScale) {
console.error('No oppositeYScale to draw opposite y axis.');
return;
}
const drawableWidth = this.getDrawableSize()[0];

@@ -267,11 +357,17 @@ const axis = this.setAxisTick(this.config_.oppositeYAxis, d3AxisRight(this.oppositeYScale), data);

.style('text-anchor', 'start')
.style('font-size', '1.1em')
.style('font-size', this.fontSizeForAxis)
.text(this.config_.oppositeYAxis.label);
this.chart.selectAll('.opposite-yaxis .tick text')
.call(this.wrapAxisLabels, this.margins.right - 15, 10);
.call(this.wrapAxisLabels.bind(this), this.margins.right - 15, 10);
}
/*
/**
* Add line break on too long axis levels labels.
* @param text A d3 text element to wrap.
* @param width Max width available for the text.
* @param x the x value to shift the element (to avoid overlaping the axis).
*/
wrapAxisLabels(text, width, x) {
const fontUnitGroup = this.fontSizeForAxis.match(/[a-zA-Z]+$/);
const fontUnit = fontUnitGroup ? fontUnitGroup[0] : 'rem';
const fontSize = fontUnitGroup ? parseFloat(this.fontSizeForAxis.substring(0, fontUnitGroup.index)) : 1.1;
text.nodes().forEach((node) => {

@@ -282,6 +378,6 @@ const textSelection = d3Select(node);

const maxNumberOfLines = 2;
const lineHeight = 1.1; // ems
const lineHeight = fontSize;
const y = mustBreakWords ? -8 : 0;
const dy = parseFloat(textSelection.attr('dy'));
let tspan = textSelection.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', `${dy}em`);
let tspan = textSelection.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', `${dy}${fontUnit}`);
let line = [];

@@ -305,3 +401,3 @@ let lineNumber = 0;

line = [word];
const newLineDy = `${lineNumber * lineHeight + dy}em`;
const newLineDy = `${lineNumber * lineHeight + dy}${fontUnit}`;
tspan = textSelection.append('tspan').attr('x', x).attr('y', y).attr('dy', newLineDy).text(word);

@@ -323,2 +419,3 @@ }

* @param data Data to determine AxisType
* @return the axis set with the tick function.
*/

@@ -331,3 +428,3 @@ setAxisTick(axisConfig, baseAxis, data) {

const dataRow = data.find(dataRow => this.compareData(dataRow[axisColumn], d));
return dataRow[axisConfig.tickLabelColumn || axisColumn];
return dataRow ? dataRow[axisConfig.tickLabelColumn || axisColumn] : null;
};

@@ -379,2 +476,4 @@ if (axisType === AxisType.TEXT) {

* Can use a buffer around the value to create new max and min values around the given value.
* On numbers, buffer is 1% of the value.
* On date, it's 15 days.
*/

@@ -389,9 +488,8 @@ determineDomain(minValue, maxValue) {

const newMax = new Date(maxValue);
return [
newMin.setDate(minValue.getDate() - 15),
newMax.setDate(maxValue.getDate() + 15),
];
newMin.setDate(minValue.getDate() - 15);
newMax.setDate(maxValue.getDate() + 15);
return [newMin, newMax];
}
if (typeof minValue === 'number' && typeof maxValue === 'number') {
const buffer = minValue / 100;
const buffer = Math.abs(minValue) / 100;
return [minValue - buffer, maxValue + buffer];

@@ -404,7 +502,11 @@ }

* Use the name of the key of the data of the axis as axis label if no label is configured for this axis.
* A config must be set.
*/
useDataLabelAsDefaultForAxis(axis) {
if (!this.assertConfigExists()) {
return;
}
const axisConfig = this.config_[axis];
if (axisConfig && !axisConfig.label) {
axisConfig.label = this.getAxisColumnName(axisConfig) || '';
axisConfig.label = axisConfig.axisColumn;
}

@@ -419,3 +521,3 @@ }

if (text.length > length) {
return `${text.substring(0, length)} ...`;
return `${text.substring(0, length)} …`;
}

@@ -425,3 +527,3 @@ return text;

/**
* Determine if a given value from the x or y axes can be found in one given data entry
* Compare two value of the same type. Return True if they are defined and match.
* @param axisColumnName: the base value.

@@ -435,6 +537,6 @@ * @param selectedValue the value to compare with.

}
// Comparison for number and sting values
if ((typeof value === 'number' || typeof value === 'string') &&
(typeof selectedValue === 'number' || typeof selectedValue === 'string')) {
return getRoundedNumber(value) === getRoundedNumber(selectedValue);
// Comparison for number and string values
if ((typeof value === 'string' && typeof selectedValue === 'string') ||
(typeof value === 'number' || typeof selectedValue === 'number')) {
return value === selectedValue;
}

@@ -441,0 +543,0 @@ return false;

1

lib/index.d.ts
export * from './base-d3-chart-svg';
export * from './cartesian-chart';
export * from './utils';

1

lib/index.js
export * from './base-d3-chart-svg';
export * from './cartesian-chart';
export * from './utils';
//# sourceMappingURL=index.js.map

10

lib/utils.js

@@ -6,5 +6,13 @@ /**

export function getRoundedNumber(value) {
if (value === null || value === undefined || Number.isNaN(value)) {
return value;
}
// If the value contains any not numeric value (except point or start with a minus), return it as string.
const stringValue = `${value}`;
if (!(/^[-]?[\d|\.]+$/.test(stringValue))) {
return `${stringValue}`;
}
const floatValue = typeof value === 'string' ? parseFloat(value) : value;
return isNaN(floatValue) ? value : Math.round(floatValue);
return Math.round(floatValue);
}
//# sourceMappingURL=utils.js.map

28

package.json
{
"name": "@geoblocks/d3-helper",
"version": "1.0.9",
"version": "1.1.0",
"description": "d3 helper classes",
"license": "bsd",
"license": "BSD-3-Clause",
"author": "Camptocamp SA <info@camptocamp.com> (https://www.camptocamp.com)",

@@ -18,3 +18,5 @@ "contributors": [

"d3",
"helper"
"helper",
"cartesian",
"chart"
],

@@ -31,10 +33,13 @@ "files": [

"scripts": {
"build": "tsc --pretty",
"build": "npm run lint && npm run test && npm run build-only",
"build-only": "tsc --pretty",
"doc": "typedoc --out apidoc --theme minimal --readme none --hideGenerator --listInvalidSymbolLinks --toc none",
"lint": "tslint src/*.ts",
"start": "parcel serve --port 8080 examples/*.html --public-url /"
"start": "parcel serve --port 8080 examples/*.html --public-url /",
"test": "jest --coverage"
},
"dependencies": {
"d3-array": "^2.4.0",
"d3-axis": "^1.0.12",
"d3-format": "^1.4.3",
"d3-format": "^1.4.4",
"d3-scale": "^3.2.1",

@@ -45,13 +50,18 @@ "d3-selection": "^1.4.1",

"devDependencies": {
"@babel/preset-env": "^7.10.2",
"@babel/preset-typescript": "^7.10.1",
"@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",
"parcel-bundler": "^1.12.4",
"tslib": "^1.10.0",
"tslint": "^6.1.0",
"tslint": "^6.1.2",
"tslint-config-airbnb": "^5.11.2",
"tslint-consistent-codestyle": "^1.16.0",
"typedoc": "^0.17.3",
"typescript": "^3.8.3"
"typedoc": "^0.17.7",
"typescript": "^3.9.5"
}
}

15

README.md

@@ -5,9 +5,9 @@ # d3-helper

This library provides some classes and function for common operations with the d3 library.
It let you able to manage your chart as you want.
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.
## Use the code in a project.
Simple use it through [npm @geoblocks/d3-helper](https://www.npmjs.com/package/@geoblocks/d3-helper).
See the examples for more informations on how to set the basics of your chart.
Simply use it through [npm @geoblocks/d3-helper](https://www.npmjs.com/package/@geoblocks/d3-helper).
See the examples for more informations on how to set the basics of your charts.

@@ -23,4 +23,4 @@ ### Overview

Extends BaseD3ChartSVG.
Class that provides functions to manage cartesian charts (bars, scatterplots, lines...)
Especially manage the axis of cartesian charts.
Class that provides functions to manage cartesian charts (for bars, scatterplots, lines...)
Mainly manage the axis of cartesian charts.
Supported axis data types are: Date, number and text.

@@ -52,3 +52,3 @@

```
npm version patch
npm version [<newversion> | major | minor | patch
npm run build && npm publish && git push --tags origin master

@@ -60,2 +60,1 @@ ```

* Tooltips helpers for data.
* Tests.
lib/base-d3-chart-svg.js.map

Sorry, the diff of this file is not supported yet

lib/cartesian-chart.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/utils.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc