chartformers 1.0.55 → 1.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -5
- package/dist/chartformers.css +1 -1
- package/dist/chartformers.es.js +10457 -4624
- package/dist/chartformers.umd.js +107 -36
- package/dist/src/charts/{barchart.d.ts → barchart/index.d.ts} +4 -3
- package/dist/src/charts/chord/index.d.ts +10 -0
- package/dist/src/charts/chord/types.d.ts +21 -0
- package/dist/src/charts/chord/utils.d.ts +2 -0
- package/dist/src/charts/circle-packs/index.d.ts +4 -3
- package/dist/src/charts/dumbbell/index.d.ts +13 -0
- package/dist/src/charts/dumbbell/types.d.ts +7 -0
- package/dist/src/charts/histogram/index.d.ts +23 -0
- package/dist/src/charts/histogram/types.d.ts +8 -0
- package/dist/src/charts/histogram/utils.d.ts +14 -0
- package/dist/src/charts/linechart/index.d.ts +18 -0
- package/dist/src/charts/linechart/types.d.ts +1 -0
- package/dist/src/charts/network/index.d.ts +53 -0
- package/dist/src/charts/network/types.d.ts +30 -0
- package/dist/src/charts/{piechart.d.ts → piechart/index.d.ts} +1 -1
- package/dist/src/charts/{population-pyramid.d.ts → population-pyramid/index.d.ts} +1 -2
- package/dist/src/charts/population-pyramid/types.d.ts +6 -0
- package/dist/src/charts/{sankey.d.ts → sankey/index.d.ts} +2 -1
- package/dist/src/charts/sankey/types.d.ts +20 -0
- package/dist/src/charts/sankey/utils.d.ts +11 -0
- package/dist/src/charts/stacked-barchart-variants/grouped-barchart.d.ts +5 -1
- package/dist/src/charts/stacked-barchart-variants/morph-stacked-barchart.d.ts +9 -0
- package/dist/src/charts/stacked-barchart-variants/percentage-barchart.d.ts +1 -1
- package/dist/src/charts/stacked-barchart-variants/stacked-barchart.d.ts +1 -1
- package/dist/src/charts/stacked-barchart-variants/tooltip.d.ts +6 -0
- package/dist/src/charts/stacked-barchart-variants/types.d.ts +16 -0
- package/dist/src/charts/sunburst.d.ts +8 -0
- package/dist/src/charts/tree.d.ts +8 -0
- package/dist/src/charts/waterfall/deltaWaterfall.d.ts +10 -0
- package/dist/src/charts/waterfall/tooltip.d.ts +2 -0
- package/dist/src/charts/waterfall/types.d.ts +11 -0
- package/dist/src/charts/waterfall/utils.d.ts +14 -0
- package/dist/src/charts/waterfall/waterfall.d.ts +11 -0
- package/dist/src/components/tooltip.d.ts +3 -2
- package/dist/src/index.d.ts +10 -0
- package/dist/src/types.d.ts +18 -51
- package/dist/src/utils.d.ts +22 -6
- package/package.json +12 -10
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { pointData, tooltipFormat } from '
|
|
2
|
+
import { pointData, tooltipFormat, lineDecor, orientationType } from '../../types';
|
|
3
3
|
type BarchartProps = {
|
|
4
4
|
data: pointData[];
|
|
5
5
|
color?: {
|
|
6
6
|
idx?: number;
|
|
7
7
|
type?: 'fixed' | 'colorful';
|
|
8
8
|
};
|
|
9
|
-
orientation?:
|
|
9
|
+
orientation?: orientationType;
|
|
10
10
|
tooltipFormat?: tooltipFormat;
|
|
11
|
+
lineProps?: lineDecor;
|
|
11
12
|
};
|
|
12
13
|
export declare function BarChart({ data, color: { idx, // default idx
|
|
13
|
-
type, }, orientation, tooltipFormat: { prefix, suffix, formatType } }: BarchartProps): React.JSX.Element;
|
|
14
|
+
type, }, orientation, tooltipFormat: { prefix, suffix, formatType }, lineProps: { showLine, showDots, curve } }: BarchartProps): React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat } from '../../types';
|
|
3
|
+
import { link, chordData } from './types';
|
|
4
|
+
type dataProp = chordData | link[];
|
|
5
|
+
type ChordProps = {
|
|
6
|
+
data: dataProp;
|
|
7
|
+
tooltipFormat?: tooltipFormat;
|
|
8
|
+
};
|
|
9
|
+
export declare function ChordDiagram({ data, tooltipFormat: { prefix, suffix, formatType } }: ChordProps): React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type node = {
|
|
2
|
+
name: string;
|
|
3
|
+
color: string;
|
|
4
|
+
};
|
|
5
|
+
export type link = {
|
|
6
|
+
source: string;
|
|
7
|
+
target: string;
|
|
8
|
+
value: number;
|
|
9
|
+
};
|
|
10
|
+
export type matrixData = {
|
|
11
|
+
name: string;
|
|
12
|
+
values: number[];
|
|
13
|
+
};
|
|
14
|
+
export type chordData = {
|
|
15
|
+
nodes?: node[];
|
|
16
|
+
links: link[];
|
|
17
|
+
};
|
|
18
|
+
export type chordDatum = {
|
|
19
|
+
name: string;
|
|
20
|
+
values: number[];
|
|
21
|
+
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { hierarchyData, tooltipFormat } from '../../types';
|
|
3
3
|
type PackProps = {
|
|
4
|
-
data:
|
|
4
|
+
data: hierarchyData;
|
|
5
5
|
tooltipFormat?: tooltipFormat;
|
|
6
|
+
colorScheme?: 'monochrome' | 'rainbow';
|
|
6
7
|
};
|
|
7
|
-
export declare function CirclePacks({ data, tooltipFormat }: PackProps): React.JSX.Element;
|
|
8
|
+
export declare function CirclePacks({ data, tooltipFormat, colorScheme }: PackProps): React.JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat } from '../../types';
|
|
3
|
+
import { dumbbellDatum } from './types';
|
|
4
|
+
type DumbbellProps<T> = {
|
|
5
|
+
data: dumbbellDatum[];
|
|
6
|
+
title?: string;
|
|
7
|
+
tooltipFormat?: tooltipFormat;
|
|
8
|
+
orientation?: 'vertical' | 'horizontal';
|
|
9
|
+
};
|
|
10
|
+
export declare function DumbbellChart<T extends {
|
|
11
|
+
label: string;
|
|
12
|
+
}>({ data, title, orientation, tooltipFormat: { prefix, suffix, formatType } }: DumbbellProps<T>): React.JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { lineDecor, tooltipFormat } from '../../types';
|
|
3
|
+
import { histogramDatum, histogramChartData } from './types';
|
|
4
|
+
type sortOption = {
|
|
5
|
+
sortable?: boolean;
|
|
6
|
+
filterEmptyBin?: boolean;
|
|
7
|
+
};
|
|
8
|
+
type binOption = {
|
|
9
|
+
mode: "arbitrary" | "fixed" | "interval" | "algorithm" | "custom";
|
|
10
|
+
value: number | number[] | "Freedman-Diaconis" | "Scott" | "Sturges";
|
|
11
|
+
compareConsolidate?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type HistogramProps = {
|
|
14
|
+
data: histogramChartData<histogramDatum>;
|
|
15
|
+
compareMode?: "default" | "compare";
|
|
16
|
+
binOption?: binOption;
|
|
17
|
+
sortOption?: sortOption;
|
|
18
|
+
orientation?: 'horizontal' | 'vertical';
|
|
19
|
+
tooltipFormat?: tooltipFormat;
|
|
20
|
+
lineProps?: lineDecor;
|
|
21
|
+
};
|
|
22
|
+
export declare function Histogram({ data, compareMode, binOption, sortOption: { sortable, filterEmptyBin }, orientation, tooltipFormat: { prefix, suffix, formatType }, lineProps: { showLine, showDots, curve } }: HistogramProps): React.JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Bin } from 'd3';
|
|
2
|
+
export type histogramDatum = Record<string, unknown>;
|
|
3
|
+
export type histogramChartData<T extends histogramDatum> = {
|
|
4
|
+
title: string;
|
|
5
|
+
valueKey?: string;
|
|
6
|
+
data: T[] | histogramChartData<T>[];
|
|
7
|
+
};
|
|
8
|
+
export type binnedData = Bin<histogramDatum, number>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Selection, ScaleLinear, ScaleBand } from 'd3';
|
|
2
|
+
import { binnedData } from './types';
|
|
3
|
+
import { orientationType, curveTypes } from '../../types';
|
|
4
|
+
export declare function renderHistogramLine(canvas: Selection<SVGGElement, unknown, null, undefined>, labelScale: {
|
|
5
|
+
binRanges: ScaleLinear<number, number>;
|
|
6
|
+
binSorted: ScaleBand<string>;
|
|
7
|
+
isSorted: boolean;
|
|
8
|
+
}, valueScale: ScaleLinear<number, number>, renderData: binnedData[], width: number, orientation?: orientationType, lineProps?: {
|
|
9
|
+
showLine?: boolean;
|
|
10
|
+
showDots?: boolean;
|
|
11
|
+
curve?: curveTypes;
|
|
12
|
+
lineStroke?: string;
|
|
13
|
+
dotFill?: string;
|
|
14
|
+
}): void;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat } from '../../types';
|
|
3
|
+
import { lineChartDatum } from './types';
|
|
4
|
+
type lineDatum = {
|
|
5
|
+
datum: lineChartDatum[];
|
|
6
|
+
title: string;
|
|
7
|
+
};
|
|
8
|
+
type lineChartProps = {
|
|
9
|
+
type?: "line" | "area";
|
|
10
|
+
data: lineDatum[];
|
|
11
|
+
xKey: string;
|
|
12
|
+
yValue: string;
|
|
13
|
+
withBrush?: boolean;
|
|
14
|
+
colorIdx?: number;
|
|
15
|
+
tooltipFormat?: tooltipFormat;
|
|
16
|
+
};
|
|
17
|
+
export declare function LineChart({ data, type, xKey, yValue, withBrush, colorIdx, tooltipFormat }: lineChartProps): React.JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type lineChartDatum = Record<string, string | number | Date>;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HierarchyNode, HierarchyLink } from 'd3';
|
|
3
|
+
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
4
|
+
import { tooltipFormat, hierarchyData } from '../../types';
|
|
5
|
+
import { networkDataType } from './types';
|
|
6
|
+
type primitiveOrDate = string | number | boolean | Date;
|
|
7
|
+
export type bubbleDataset = SimulationNodeDatum & {
|
|
8
|
+
/** Required label property */
|
|
9
|
+
label: string;
|
|
10
|
+
/**
|
|
11
|
+
* Requires at least one dynamic property with a string key and number value.
|
|
12
|
+
* Note: TypeScript handles this via indexing rules alongside specific property types.
|
|
13
|
+
*/
|
|
14
|
+
[key: string]: number | primitiveOrDate;
|
|
15
|
+
};
|
|
16
|
+
type bubbleDataType = {
|
|
17
|
+
nodes: bubbleDataset[];
|
|
18
|
+
valueProp: string;
|
|
19
|
+
groupBy: string;
|
|
20
|
+
nodeId?: string;
|
|
21
|
+
clusterByGroup?: boolean;
|
|
22
|
+
tooltipColumns?: string[];
|
|
23
|
+
};
|
|
24
|
+
type treeNode = HierarchyNode<hierarchyData> & {
|
|
25
|
+
baseX?: number;
|
|
26
|
+
baseY?: number;
|
|
27
|
+
finalX?: number;
|
|
28
|
+
finalY?: number;
|
|
29
|
+
};
|
|
30
|
+
export type networkHierarchyNode = SimulationNodeDatum & treeNode;
|
|
31
|
+
export type networkHierarchyLink = SimulationLinkDatum<networkHierarchyNode> & HierarchyLink<hierarchyData> & {
|
|
32
|
+
value?: number;
|
|
33
|
+
};
|
|
34
|
+
type NetworkProps = {
|
|
35
|
+
data: hierarchyData | networkDataType | bubbleDataType;
|
|
36
|
+
noLabel?: boolean;
|
|
37
|
+
sourceNode?: string;
|
|
38
|
+
targetNode?: string;
|
|
39
|
+
linkType?: {
|
|
40
|
+
curve?: "straight" | "curved";
|
|
41
|
+
directed?: boolean;
|
|
42
|
+
};
|
|
43
|
+
hierarchyMode?: "default" | "nodes only" | "leaf only";
|
|
44
|
+
color?: {
|
|
45
|
+
idx?: number;
|
|
46
|
+
type?: 'fixed' | 'colorful';
|
|
47
|
+
};
|
|
48
|
+
tooltipFormat?: tooltipFormat;
|
|
49
|
+
};
|
|
50
|
+
export declare function NetworkGraph({ data, noLabel, sourceNode, targetNode, hierarchyMode, color: { idx, // default idx
|
|
51
|
+
type, }, linkType: { curve, // default idx
|
|
52
|
+
directed, }, tooltipFormat: { prefix, suffix, formatType } }: NetworkProps): React.JSX.Element;
|
|
53
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
2
|
+
import { HierarchyCircularNode, HierarchyLink } from 'd3';
|
|
3
|
+
import { hierarchyData } from '../../types';
|
|
4
|
+
export type networkNode = SimulationNodeDatum & {
|
|
5
|
+
id: string;
|
|
6
|
+
group?: number;
|
|
7
|
+
radius?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
};
|
|
10
|
+
export type networkLink = SimulationLinkDatum<networkNode> & {
|
|
11
|
+
source: string;
|
|
12
|
+
target: string;
|
|
13
|
+
value?: number;
|
|
14
|
+
type?: string;
|
|
15
|
+
};
|
|
16
|
+
export type networkResolvedLink = Omit<networkLink, "source" | "target"> & {
|
|
17
|
+
source: networkNode;
|
|
18
|
+
target: networkNode;
|
|
19
|
+
value?: number;
|
|
20
|
+
type?: string;
|
|
21
|
+
};
|
|
22
|
+
export type networkDataType = {
|
|
23
|
+
nodes: networkNode[];
|
|
24
|
+
links: networkLink[];
|
|
25
|
+
};
|
|
26
|
+
export type networkEdge = [string, string];
|
|
27
|
+
export type networkHierarchyNode = SimulationNodeDatum & HierarchyCircularNode<hierarchyData>;
|
|
28
|
+
export type networkHierarchyLink = SimulationLinkDatum<networkHierarchyNode> & HierarchyLink<hierarchyData> & {
|
|
29
|
+
value?: number;
|
|
30
|
+
};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { ageRangeGroup
|
|
2
|
+
import { ageRangeGroup } from './types';
|
|
3
3
|
type PopulationPyramidProps = {
|
|
4
4
|
data: ageRangeGroup[];
|
|
5
|
-
tooltipFormat?: tooltipFormat;
|
|
6
5
|
};
|
|
7
6
|
export declare function PopulationPyramid({ data, }: PopulationPyramidProps): React.JSX.Element;
|
|
8
7
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { SankeyGraph, SankeyNode, SankeyLink } from 'd3-sankey';
|
|
3
|
-
import {
|
|
3
|
+
import { tooltipFormat } from '../../types';
|
|
4
|
+
import { rawLink, sankeyNode, sankeyLink } from './types';
|
|
4
5
|
export type LayoutNode = SankeyNode<sankeyNode, sankeyLink>;
|
|
5
6
|
export type LayoutLink = SankeyLink<sankeyNode, sankeyLink>;
|
|
6
7
|
export type LayoutGraph = SankeyGraph<sankeyNode, sankeyLink>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type sankeyNode = {
|
|
2
|
+
name: string;
|
|
3
|
+
};
|
|
4
|
+
export type rawLink = {
|
|
5
|
+
source: string;
|
|
6
|
+
target: string;
|
|
7
|
+
value: number;
|
|
8
|
+
};
|
|
9
|
+
export type sankeyLink = {
|
|
10
|
+
source: any;
|
|
11
|
+
target: any;
|
|
12
|
+
value: number;
|
|
13
|
+
sourceName?: string;
|
|
14
|
+
targetName?: string;
|
|
15
|
+
id?: string;
|
|
16
|
+
};
|
|
17
|
+
export type sankeyData = {
|
|
18
|
+
nodes: sankeyNode[];
|
|
19
|
+
links: sankeyLink[];
|
|
20
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type Link = {
|
|
2
|
+
source: string;
|
|
3
|
+
target: string;
|
|
4
|
+
value: number;
|
|
5
|
+
};
|
|
6
|
+
interface CycleDetectionResult {
|
|
7
|
+
hasCircularConnection: boolean;
|
|
8
|
+
cyclePath?: string[];
|
|
9
|
+
}
|
|
10
|
+
export declare function detectCircularConnection(links: Link[]): CycleDetectionResult;
|
|
11
|
+
export {};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { StackedBarChartProps } from './types';
|
|
3
|
-
|
|
3
|
+
type GroupedBarChartProps = StackedBarChartProps & {
|
|
4
|
+
focusOnPlot?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare function GroupedBarChart({ data, colorIdx, orientation, focusOnPlot, tooltipFormat: { prefix, suffix, formatType } }: GroupedBarChartProps): React.JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { StackedBarChartProps } from './types';
|
|
3
|
+
type modeType = 'stacked' | 'grouped' | 'percentage';
|
|
4
|
+
type MorphStackedBarChartProps = StackedBarChartProps & {
|
|
5
|
+
focusOnPlot?: boolean;
|
|
6
|
+
mode?: modeType;
|
|
7
|
+
};
|
|
8
|
+
export declare function MorphStackedBarChart({ data, colorIdx, mode, orientation, focusOnPlot, tooltipFormat: { prefix, suffix, formatType } }: MorphStackedBarChartProps): React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { StackedBarChartProps } from './types';
|
|
3
|
-
export declare function PercentageBarChart({ data, colorIdx, orientation, tooltipFormat }: StackedBarChartProps): React.JSX.Element;
|
|
3
|
+
export declare function PercentageBarChart({ data, colorIdx, orientation, tooltipFormat: { prefix, suffix, formatType } }: StackedBarChartProps): React.JSX.Element;
|
|
@@ -3,5 +3,5 @@ import { StackedBarChartProps } from './types';
|
|
|
3
3
|
type StackedBarChartPropsExtended = StackedBarChartProps & {
|
|
4
4
|
focusOnPlot?: boolean;
|
|
5
5
|
};
|
|
6
|
-
export declare function StackedBarChart({ data, focusOnPlot, colorIdx, orientation, tooltipFormat }: StackedBarChartPropsExtended): React.JSX.Element;
|
|
6
|
+
export declare function StackedBarChart({ data, focusOnPlot, colorIdx, orientation, tooltipFormat: { prefix, suffix, formatType }, }: StackedBarChartPropsExtended): React.JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -2,6 +2,8 @@ import { tooltipFormat } from '../../types';
|
|
|
2
2
|
export interface LayeredData {
|
|
3
3
|
label: string;
|
|
4
4
|
total?: number;
|
|
5
|
+
totalPos?: number;
|
|
6
|
+
totalMin?: number;
|
|
5
7
|
[subject: string]: number | string | undefined;
|
|
6
8
|
}
|
|
7
9
|
export interface SortedLayer {
|
|
@@ -15,9 +17,23 @@ export type ExtendedSeriesPoint = d3.SeriesPoint<LayeredData> & {
|
|
|
15
17
|
export type ExtendedSeries = ExtendedSeriesPoint[] & {
|
|
16
18
|
key: string;
|
|
17
19
|
};
|
|
20
|
+
export type ExtendedSeriesPointWithSorted = d3.SeriesPoint<LayeredData & {
|
|
21
|
+
sortedLayers: string[];
|
|
22
|
+
}> & {
|
|
23
|
+
key: string;
|
|
24
|
+
barKey: string;
|
|
25
|
+
};
|
|
26
|
+
export type ExtendedSeriesWithSorted = ExtendedSeriesPointWithSorted[] & {
|
|
27
|
+
key: string;
|
|
28
|
+
};
|
|
18
29
|
export interface StackedBarChartProps {
|
|
19
30
|
data: LayeredData[];
|
|
20
31
|
colorIdx?: number;
|
|
21
32
|
orientation?: 'vertical' | 'horizontal';
|
|
22
33
|
tooltipFormat?: tooltipFormat;
|
|
23
34
|
}
|
|
35
|
+
export type stackOrderByCategory = {
|
|
36
|
+
label: string;
|
|
37
|
+
top: string;
|
|
38
|
+
bottom: string;
|
|
39
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat, hierarchyData } from '../types';
|
|
3
|
+
type sunburstProps = {
|
|
4
|
+
data: hierarchyData;
|
|
5
|
+
tooltipFormat?: tooltipFormat;
|
|
6
|
+
};
|
|
7
|
+
export declare function Sunburst({ data, tooltipFormat }: sunburstProps): React.JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat, hierarchyData } from '../types';
|
|
3
|
+
type TreeProps = {
|
|
4
|
+
data: hierarchyData;
|
|
5
|
+
tooltipFormat?: tooltipFormat;
|
|
6
|
+
};
|
|
7
|
+
export declare function TreeDiagram({ data, tooltipFormat: { prefix, suffix, formatType } }: TreeProps): React.JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat, lineDecor } from '../../types';
|
|
3
|
+
import { deltaWaterfallDatum } from './types';
|
|
4
|
+
type WaterfallProps = {
|
|
5
|
+
data: deltaWaterfallDatum[];
|
|
6
|
+
tooltipFormat?: tooltipFormat;
|
|
7
|
+
lineProps?: lineDecor;
|
|
8
|
+
};
|
|
9
|
+
export declare function DeltaWaterfall({ data, tooltipFormat: { prefix, suffix, formatType }, lineProps: { showLine, showDots, curve } }: WaterfallProps): React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { waterfallDatum } from './types';
|
|
2
|
+
export declare const colors: {
|
|
3
|
+
inflows: string;
|
|
4
|
+
outflows: string;
|
|
5
|
+
open: string;
|
|
6
|
+
close: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const formatWaterfallData: (data: waterfallDatum[]) => {
|
|
9
|
+
start: number;
|
|
10
|
+
end: number;
|
|
11
|
+
label: string;
|
|
12
|
+
value: number;
|
|
13
|
+
type: string;
|
|
14
|
+
}[];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { tooltipFormat, lineDecor } from '../../types';
|
|
3
|
+
import { waterfallDatum } from './types';
|
|
4
|
+
type WaterfallProps = {
|
|
5
|
+
data: waterfallDatum[];
|
|
6
|
+
tooltipFormat?: tooltipFormat;
|
|
7
|
+
orientation?: "vertical" | "horizontal";
|
|
8
|
+
lineProps?: lineDecor;
|
|
9
|
+
};
|
|
10
|
+
export declare function WaterfallChart({ data, orientation, tooltipFormat: { prefix, suffix, formatType }, lineProps: { showLine, showDots, curve } }: WaterfallProps): React.JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
1
|
+
import { FunctionComponent, ReactNode } from 'react';
|
|
2
2
|
import * as d3 from 'd3';
|
|
3
3
|
type ITooltip = {
|
|
4
4
|
pCount?: number;
|
|
5
|
+
children?: ReactNode;
|
|
5
6
|
};
|
|
6
7
|
export declare const Tooltip: FunctionComponent<ITooltip>;
|
|
7
8
|
export declare const SankeyTooltip: FunctionComponent;
|
|
@@ -9,7 +10,7 @@ export declare const getTooltip: (svg: d3.Selection<(SVGAElement | HTMLDivElemen
|
|
|
9
10
|
type PositioningProps = {
|
|
10
11
|
e: MouseEvent;
|
|
11
12
|
svg: SVGSVGElement;
|
|
12
|
-
yScale
|
|
13
|
+
yScale?: d3.ScaleLinear<number, number>;
|
|
13
14
|
};
|
|
14
15
|
export declare function moveTooltip(tooltip: any, positionProps: PositioningProps): void;
|
|
15
16
|
export declare function tooltipMove(e: any, tooltip: any): void;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
export { BarChart } from './charts/barchart';
|
|
2
|
+
export { LineChart } from './charts/linechart';
|
|
2
3
|
export { PieChart } from './charts/piechart';
|
|
3
4
|
export { StackedBarChart } from './charts/stacked-barchart-variants/stacked-barchart';
|
|
4
5
|
export { GroupedBarChart } from './charts/stacked-barchart-variants/grouped-barchart';
|
|
5
6
|
export { PercentageBarChart } from './charts/stacked-barchart-variants/percentage-barchart';
|
|
7
|
+
export { MorphStackedBarChart } from './charts/stacked-barchart-variants/morph-stacked-barchart';
|
|
6
8
|
export { Sankey } from './charts/sankey';
|
|
7
9
|
export { CirclePacks } from './charts/circle-packs';
|
|
8
10
|
export { PopulationPyramid } from './charts/population-pyramid';
|
|
9
11
|
export { StockPriceChart } from './charts/stockprice';
|
|
12
|
+
export { Sunburst } from './charts/sunburst';
|
|
13
|
+
export { WaterfallChart } from './charts/waterfall/waterfall';
|
|
14
|
+
export { DeltaWaterfall } from './charts/waterfall/deltaWaterfall';
|
|
15
|
+
export { DumbbellChart } from './charts/dumbbell';
|
|
16
|
+
export { ChordDiagram } from './charts/chord';
|
|
17
|
+
export { Histogram } from './charts/histogram';
|
|
18
|
+
export { NetworkGraph } from './charts/network';
|
|
19
|
+
export { TreeDiagram } from './charts/tree';
|
package/dist/src/types.d.ts
CHANGED
|
@@ -2,39 +2,9 @@ export type pointData = {
|
|
|
2
2
|
label: string;
|
|
3
3
|
value: number;
|
|
4
4
|
};
|
|
5
|
-
export type
|
|
6
|
-
source: string;
|
|
7
|
-
target: string;
|
|
8
|
-
value: number;
|
|
9
|
-
};
|
|
10
|
-
export type sankeyNode = {
|
|
11
|
-
name: string;
|
|
12
|
-
};
|
|
13
|
-
export type sankeyLink = {
|
|
14
|
-
source: any;
|
|
15
|
-
target: any;
|
|
16
|
-
value: number;
|
|
17
|
-
sourceName?: string;
|
|
18
|
-
targetName?: string;
|
|
19
|
-
id?: string;
|
|
20
|
-
};
|
|
21
|
-
export type sankeyData = {
|
|
22
|
-
nodes: sankeyNode[];
|
|
23
|
-
links: sankeyLink[];
|
|
24
|
-
};
|
|
25
|
-
export type circlePackData = {
|
|
26
|
-
name: string;
|
|
27
|
-
value?: number;
|
|
28
|
-
children?: circlePackData[];
|
|
29
|
-
};
|
|
30
|
-
export type ageRangeGroup = {
|
|
31
|
-
ageRange: string;
|
|
32
|
-
male: number;
|
|
33
|
-
female: number;
|
|
34
|
-
Total?: number;
|
|
35
|
-
};
|
|
5
|
+
export type formatType = "long" | "short";
|
|
36
6
|
export type tooltipFormat = {
|
|
37
|
-
formatType?:
|
|
7
|
+
formatType?: formatType;
|
|
38
8
|
prefix?: string;
|
|
39
9
|
suffix?: string;
|
|
40
10
|
};
|
|
@@ -64,25 +34,22 @@ export interface PackLink {
|
|
|
64
34
|
source: PackNode;
|
|
65
35
|
target: PackNode;
|
|
66
36
|
}
|
|
67
|
-
export
|
|
68
|
-
|
|
69
|
-
open: string | number;
|
|
70
|
-
hi: string | number;
|
|
71
|
-
low: string | number;
|
|
72
|
-
close: string | number;
|
|
73
|
-
adj_close: string | number;
|
|
74
|
-
volume: string | number;
|
|
75
|
-
}
|
|
76
|
-
export interface stockDataFormatted {
|
|
77
|
-
date: Date;
|
|
78
|
-
open: number;
|
|
79
|
-
hi: number;
|
|
37
|
+
export type lineTooltipPosData = {
|
|
38
|
+
xPos: number;
|
|
80
39
|
low: number;
|
|
81
|
-
close: number;
|
|
82
|
-
adj_close: number;
|
|
83
40
|
volume: number;
|
|
84
|
-
}
|
|
85
|
-
export type lineDatum = {
|
|
86
|
-
date: Date;
|
|
87
|
-
value: number;
|
|
88
41
|
};
|
|
42
|
+
export type curveTypes = "linear" | "basis" | "cardinal" | "catmullrom" | "natural";
|
|
43
|
+
export type lineDecor = {
|
|
44
|
+
showLine?: boolean;
|
|
45
|
+
showDots?: boolean;
|
|
46
|
+
curve?: curveTypes;
|
|
47
|
+
};
|
|
48
|
+
export type hierarchyData = {
|
|
49
|
+
name: string;
|
|
50
|
+
value?: number;
|
|
51
|
+
children?: hierarchyData[];
|
|
52
|
+
color?: string;
|
|
53
|
+
group?: string;
|
|
54
|
+
};
|
|
55
|
+
export type orientationType = "vertical" | "horizontal";
|
package/dist/src/utils.d.ts
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Selection, ScaleBand, ScaleLinear } from 'd3';
|
|
2
|
+
import { tooltipFormat, pointData, curveTypes, orientationType, formatType } from './types';
|
|
2
3
|
export declare const cloneObj: (arr: any) => any;
|
|
3
|
-
export declare const indexColor: (i: number, assortedColorFirst?: boolean) => string;
|
|
4
|
+
export declare const indexColor: (i: number, assortedColorFirst?: boolean, shuffleColor?: boolean) => string;
|
|
4
5
|
export declare const indexSelectedColor: (i: number) => string;
|
|
5
6
|
export declare const basicFormat: (num: number, { formatType, prefix, suffix, }?: tooltipFormat) => string;
|
|
6
|
-
export declare
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export declare const formatNum: (num: number, formatType?: formatType) => string;
|
|
8
|
+
export declare const formatTooltipNum: (num: number, tooltipFormat: tooltipFormat) => string;
|
|
9
|
+
export declare function isISODateString(str: string | Date): boolean;
|
|
10
|
+
export declare const rotateLabels: (width: number, labels: string[]) => boolean;
|
|
11
|
+
export declare const sanitizeString: (str: string) => string;
|
|
12
|
+
export declare function renderLineChart(canvas: Selection<SVGGElement, unknown, null, undefined>, labelScale: {
|
|
13
|
+
scale: ScaleBand<string>;
|
|
14
|
+
offset: number;
|
|
15
|
+
}, valueScale: ScaleLinear<number, number>, renderData: {
|
|
16
|
+
data: pointData[];
|
|
17
|
+
idExtension?: string;
|
|
18
|
+
}, width: number, orientation?: orientationType, lineProps?: {
|
|
19
|
+
showLine?: boolean;
|
|
20
|
+
showDots?: boolean;
|
|
21
|
+
curve?: curveTypes;
|
|
22
|
+
lineStroke?: string;
|
|
23
|
+
dotFill?: string;
|
|
24
|
+
}): void;
|
|
25
|
+
export declare const isFiniteNumber: (value: unknown) => value is number;
|