@carbon/charts 0.32.12 → 0.33.0
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/CHANGELOG.md +322 -163
- package/README.md +18 -8
- package/axis-chart.js +20 -20
- package/axis-chart.js.map +1 -1
- package/build/demo/data/bar.d.ts +20 -0
- package/build/demo/data/line.d.ts +29 -0
- package/build/src/interfaces/charts.d.ts +5 -0
- package/build/src/model.d.ts +1 -0
- package/build/src/tools.d.ts +7 -7
- package/bundle.js +1 -1
- package/charts/area-stacked.js +3 -3
- package/charts/area-stacked.js.map +1 -1
- package/charts/area.js +3 -3
- package/charts/area.js.map +1 -1
- package/charts/bar-grouped.js +3 -3
- package/charts/bar-grouped.js.map +1 -1
- package/charts/bar-simple.js +3 -3
- package/charts/bar-simple.js.map +1 -1
- package/charts/bar-stacked.js +3 -3
- package/charts/bar-stacked.js.map +1 -1
- package/charts/bubble.js +3 -3
- package/charts/bubble.js.map +1 -1
- package/charts/donut.js +3 -3
- package/charts/donut.js.map +1 -1
- package/charts/gauge.js.map +1 -1
- package/charts/line.js +3 -3
- package/charts/line.js.map +1 -1
- package/charts/pie.js +3 -3
- package/charts/pie.js.map +1 -1
- package/charts/radar.js +1 -1
- package/charts/radar.js.map +1 -1
- package/charts/scatter.js +3 -3
- package/charts/scatter.js.map +1 -1
- package/components/axes/axis.js +25 -23
- package/components/axes/axis.js.map +1 -1
- package/components/axes/grid.js +1 -1
- package/components/axes/grid.js.map +1 -1
- package/components/axes/ruler.js +2 -2
- package/components/axes/ruler.js.map +1 -1
- package/components/axes/two-dimensional-axes.js +3 -3
- package/components/axes/two-dimensional-axes.js.map +1 -1
- package/components/axes/zero-line.js +1 -1
- package/components/axes/zero-line.js.map +1 -1
- package/components/essentials/legend.js +20 -11
- package/components/essentials/legend.js.map +1 -1
- package/components/essentials/threshold.js +9 -9
- package/components/essentials/threshold.js.map +1 -1
- package/components/essentials/title.js +2 -2
- package/components/essentials/title.js.map +1 -1
- package/components/essentials/tooltip-bar.js +7 -6
- package/components/essentials/tooltip-bar.js.map +1 -1
- package/components/essentials/tooltip.js +7 -7
- package/components/essentials/tooltip.js.map +1 -1
- package/components/graphs/area-stacked.js +1 -3
- package/components/graphs/area-stacked.js.map +1 -1
- package/components/graphs/bar-grouped.js +7 -7
- package/components/graphs/bar-grouped.js.map +1 -1
- package/components/graphs/bar-simple.js +6 -6
- package/components/graphs/bar-simple.js.map +1 -1
- package/components/graphs/bar-stacked.js +6 -6
- package/components/graphs/bar-stacked.js.map +1 -1
- package/components/graphs/gauge.js +4 -3
- package/components/graphs/gauge.js.map +1 -1
- package/components/graphs/line.js +1 -3
- package/components/graphs/line.js.map +1 -1
- package/components/graphs/pie.js +12 -12
- package/components/graphs/pie.js.map +1 -1
- package/components/graphs/radar.js +11 -11
- package/components/graphs/radar.js.map +1 -1
- package/components/graphs/scatter-stacked.js +1 -3
- package/components/graphs/scatter-stacked.js.map +1 -1
- package/components/graphs/scatter.js +6 -8
- package/components/graphs/scatter.js.map +1 -1
- package/components/graphs/skeleton.js +3 -3
- package/components/graphs/skeleton.js.map +1 -1
- package/components/layout/layout.js +10 -4
- package/components/layout/layout.js.map +1 -1
- package/configuration.js +14 -9
- package/configuration.js.map +1 -1
- package/demo/create-codesandbox.js +19 -19
- package/demo/create-codesandbox.js.map +1 -1
- package/demo/data/bar.d.ts +20 -0
- package/demo/data/bar.js +139 -110
- package/demo/data/bar.js.map +1 -1
- package/demo/data/bubble.js +29 -29
- package/demo/data/bubble.js.map +1 -1
- package/demo/data/bundle.js +1 -1
- package/demo/data/index.js +15 -5
- package/demo/data/index.js.map +1 -1
- package/demo/data/line.d.ts +29 -0
- package/demo/data/line.js +122 -60
- package/demo/data/line.js.map +1 -1
- package/demo/data/pie.js +5 -5
- package/demo/data/pie.js.map +1 -1
- package/demo/data/radar.js +12 -12
- package/demo/data/radar.js.map +1 -1
- package/demo/data/scatter.js +48 -32
- package/demo/data/scatter.js.map +1 -1
- package/demo/data/step.js +6 -6
- package/demo/data/step.js.map +1 -1
- package/demo/data/time-series-axis.js +107 -107
- package/demo/data/time-series-axis.js.map +1 -1
- package/demo/tsconfig.tsbuildinfo +18 -18
- package/interfaces/a11y.js.map +1 -1
- package/interfaces/charts.d.ts +5 -0
- package/interfaces/charts.js.map +1 -1
- package/interfaces/enums.js.map +1 -1
- package/interfaces/events.js.map +1 -1
- package/model.d.ts +1 -0
- package/model.js +47 -6
- package/model.js.map +1 -1
- package/package.json +1 -1
- package/polyfills.js +1 -1
- package/polyfills.js.map +1 -1
- package/services/angle-utils.js +8 -8
- package/services/angle-utils.js.map +1 -1
- package/services/colorPalettes.js +2 -2
- package/services/colorPalettes.js.map +1 -1
- package/services/colors.js +1 -1
- package/services/colors.js.map +1 -1
- package/services/curves.js +2 -2
- package/services/curves.js.map +1 -1
- package/services/essentials/dom-utils.js +6 -6
- package/services/essentials/dom-utils.js.map +1 -1
- package/services/essentials/events.js +1 -1
- package/services/essentials/events.js.map +1 -1
- package/services/scales-cartesian.js +17 -17
- package/services/scales-cartesian.js.map +1 -1
- package/services/time-series.js +2 -2
- package/services/time-series.js.map +1 -1
- package/tools.d.ts +7 -7
- package/tools.js +16 -14
- package/tools.js.map +1 -1
- package/tsconfig.tsbuildinfo +54 -54
package/README.md
CHANGED
|
@@ -17,26 +17,36 @@ instead:
|
|
|
17
17
|
yarn add @carbon/charts d3
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
20
|
+
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
21
|
+
bundled version of the library.
|
|
21
22
|
|
|
22
23
|
## Step-by-step instructions
|
|
23
24
|
|
|
24
|
-
Read
|
|
25
|
+
Read
|
|
26
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vanilla)
|
|
25
27
|
|
|
26
28
|
## Codesandbox examples
|
|
27
29
|
|
|
28
30
|
[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts).
|
|
29
31
|
|
|
30
|
-
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
32
|
+
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
33
|
+
each demo to see an isolated project showing you how to reproduce the demo.
|
|
31
34
|
|
|
32
35
|
## Charting data & options
|
|
33
36
|
|
|
34
|
-
Although we will definitely introduce new models in the future as we start
|
|
37
|
+
Although we will definitely introduce new models in the future as we start
|
|
38
|
+
shipping new components such as maps, Data and options follow the same model in
|
|
39
|
+
all charts, with minor exceptions and differences in specific components.
|
|
35
40
|
|
|
36
|
-
For instance in the case of a donut chart you're able to pass in an additional
|
|
41
|
+
For instance in the case of a donut chart you're able to pass in an additional
|
|
42
|
+
field called `center` in your options configuring the donut center.
|
|
37
43
|
|
|
38
|
-
For instructions on using the **tabular data format**, see
|
|
44
|
+
For instructions on using the **tabular data format**, see
|
|
45
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
|
|
39
46
|
|
|
40
|
-
There are also additional options available depending on the chart type being
|
|
47
|
+
There are also additional options available depending on the chart type being
|
|
48
|
+
used,
|
|
49
|
+
[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
|
|
41
50
|
|
|
42
|
-
Customizable options (specific to chart type) can be found
|
|
51
|
+
Customizable options (specific to chart type) can be found
|
|
52
|
+
[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
|
package/axis-chart.js
CHANGED
|
@@ -19,8 +19,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
19
19
|
return r;
|
|
20
20
|
};
|
|
21
21
|
import { Chart } from "./chart";
|
|
22
|
-
import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions
|
|
23
|
-
import { LayoutComponent, Legend, Title, Spacer
|
|
22
|
+
import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions } from "./interfaces/index";
|
|
23
|
+
import { LayoutComponent, Legend, Title, Spacer } from "./components/index";
|
|
24
24
|
import { Tools } from "./tools";
|
|
25
25
|
import { CartesianScales, Curves } from "./services/index";
|
|
26
26
|
var AxisChart = /** @class */ (function (_super) {
|
|
@@ -29,7 +29,7 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
29
29
|
var _this = _super.call(this, holder, chartConfigs) || this;
|
|
30
30
|
_this.services = Object.assign(_this.services, {
|
|
31
31
|
cartesianScales: CartesianScales,
|
|
32
|
-
curves: Curves
|
|
32
|
+
curves: Curves
|
|
33
33
|
});
|
|
34
34
|
return _this;
|
|
35
35
|
}
|
|
@@ -39,24 +39,24 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
39
39
|
components: [new Title(this.model, this.services)],
|
|
40
40
|
growth: {
|
|
41
41
|
x: LayoutGrowth.PREFERRED,
|
|
42
|
-
y: LayoutGrowth.FIXED
|
|
43
|
-
}
|
|
42
|
+
y: LayoutGrowth.FIXED
|
|
43
|
+
}
|
|
44
44
|
};
|
|
45
45
|
var legendComponent = {
|
|
46
46
|
id: "legend",
|
|
47
47
|
components: [new Legend(this.model, this.services)],
|
|
48
48
|
growth: {
|
|
49
49
|
x: LayoutGrowth.PREFERRED,
|
|
50
|
-
y: LayoutGrowth.FIXED
|
|
51
|
-
}
|
|
50
|
+
y: LayoutGrowth.FIXED
|
|
51
|
+
}
|
|
52
52
|
};
|
|
53
53
|
var graphFrameComponent = {
|
|
54
54
|
id: "graph-frame",
|
|
55
55
|
components: graphFrameComponents,
|
|
56
56
|
growth: {
|
|
57
57
|
x: LayoutGrowth.STRETCH,
|
|
58
|
-
y: LayoutGrowth.FIXED
|
|
59
|
-
}
|
|
58
|
+
y: LayoutGrowth.FIXED
|
|
59
|
+
}
|
|
60
60
|
};
|
|
61
61
|
var isLegendEnabled = this.model.getOptions().legend.enabled !== false;
|
|
62
62
|
// Decide the position of the legend in reference to the chart
|
|
@@ -86,23 +86,23 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
86
86
|
components: [new Spacer(this.model, this.services)],
|
|
87
87
|
growth: {
|
|
88
88
|
x: LayoutGrowth.PREFERRED,
|
|
89
|
-
y: LayoutGrowth.FIXED
|
|
90
|
-
}
|
|
89
|
+
y: LayoutGrowth.FIXED
|
|
90
|
+
}
|
|
91
91
|
};
|
|
92
92
|
var fullFrameComponent = {
|
|
93
93
|
id: "full-frame",
|
|
94
94
|
components: [
|
|
95
95
|
new LayoutComponent(this.model, this.services, __spreadArrays((isLegendEnabled ? [legendComponent] : []), [
|
|
96
96
|
legendSpacerComponent,
|
|
97
|
-
graphFrameComponent
|
|
97
|
+
graphFrameComponent
|
|
98
98
|
]), {
|
|
99
|
-
direction: fullFrameComponentDirection
|
|
100
|
-
})
|
|
99
|
+
direction: fullFrameComponentDirection
|
|
100
|
+
})
|
|
101
101
|
],
|
|
102
102
|
growth: {
|
|
103
103
|
x: LayoutGrowth.STRETCH,
|
|
104
|
-
y: LayoutGrowth.FIXED
|
|
105
|
-
}
|
|
104
|
+
y: LayoutGrowth.FIXED
|
|
105
|
+
}
|
|
106
106
|
};
|
|
107
107
|
// Add chart title if it exists
|
|
108
108
|
var topLevelLayoutComponents = [];
|
|
@@ -113,16 +113,16 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
113
113
|
components: [new Spacer(this.model, this.services)],
|
|
114
114
|
growth: {
|
|
115
115
|
x: LayoutGrowth.PREFERRED,
|
|
116
|
-
y: LayoutGrowth.FIXED
|
|
117
|
-
}
|
|
116
|
+
y: LayoutGrowth.FIXED
|
|
117
|
+
}
|
|
118
118
|
};
|
|
119
119
|
topLevelLayoutComponents.push(titleSpacerComponent);
|
|
120
120
|
}
|
|
121
121
|
topLevelLayoutComponents.push(fullFrameComponent);
|
|
122
122
|
return [
|
|
123
123
|
new LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
|
|
124
|
-
direction: LayoutDirection.COLUMN
|
|
125
|
-
})
|
|
124
|
+
direction: LayoutDirection.COLUMN
|
|
125
|
+
})
|
|
126
126
|
];
|
|
127
127
|
};
|
|
128
128
|
return AxisChart;
|
package/axis-chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACN,eAAe,EACf,YAAY,EACZ,kBAAkB,EAClB,eAAe,
|
|
1
|
+
{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { Chart } from \"./chart\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLegendOrientations,\n\tLegendPositions,\n\tChartConfig,\n\tAxisChartOptions\n} from \"./interfaces/index\";\nimport {\n\tLayoutComponent,\n\tLegend,\n\tTitle,\n\tTooltip,\n\tTooltipBar,\n\tSpacer\n} from \"./components/index\";\nimport { Tools } from \"./tools\";\n\nimport { CartesianScales, Curves } from \"./services/index\";\n\nexport class AxisChart extends Chart {\n\tservices: any = Object.assign(this.services, {\n\t\tcartesianScales: CartesianScales,\n\t\tcurves: Curves\n\t});\n\n\tconstructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>) {\n\t\tsuper(holder, chartConfigs);\n\t}\n\n\tprotected getAxisChartComponents(graphFrameComponents: any[]) {\n\t\tconst titleComponent = {\n\t\t\tid: \"title\",\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst legendComponent = {\n\t\t\tid: \"legend\",\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: \"graph-frame\",\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false;\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN;\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"legend\",\n\t\t\t\t\"position\"\n\t\t\t);\n\t\t\tif (legendPosition === LegendPositions.LEFT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.RIGHT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.BOTTOM) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: \"spacer\",\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: \"full-frame\",\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\tlegendSpacerComponent,\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// Add chart title if it exists\n\t\tconst topLevelLayoutComponents = [];\n\t\tif (this.model.getOptions().title) {\n\t\t\ttopLevelLayoutComponents.push(titleComponent);\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: \"spacer\",\n\t\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\t\tgrowth: {\n\t\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t\t}\n\t\t\t};\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent);\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent);\n\n\t\treturn [\n\t\t\tnew LayoutComponent(\n\t\t\t\tthis.model,\n\t\t\t\tthis.services,\n\t\t\t\ttopLevelLayoutComponents,\n\t\t\t\t{\n\t\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t\t}\n\t\t\t)\n\t\t];\n\t}\n}\n"]}
|
package/build/demo/data/bar.d.ts
CHANGED
|
@@ -15,6 +15,26 @@ export declare const groupedBarOptions: {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
|
+
export declare const groupedBarSelectedGroupsData: {
|
|
19
|
+
group: string;
|
|
20
|
+
key: string;
|
|
21
|
+
value: number;
|
|
22
|
+
}[];
|
|
23
|
+
export declare const groupedBarSelectedGroupsOptions: {
|
|
24
|
+
title: string;
|
|
25
|
+
data: {
|
|
26
|
+
selectedGroups: string[];
|
|
27
|
+
};
|
|
28
|
+
axes: {
|
|
29
|
+
left: {
|
|
30
|
+
mapsTo: string;
|
|
31
|
+
};
|
|
32
|
+
bottom: {
|
|
33
|
+
scaleType: string;
|
|
34
|
+
mapsTo: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
};
|
|
18
38
|
export declare const groupedHorizontalBarData: {
|
|
19
39
|
group: string;
|
|
20
40
|
key: string;
|
|
@@ -67,6 +67,35 @@ export declare const lineCustomDomainOptions: {
|
|
|
67
67
|
};
|
|
68
68
|
};
|
|
69
69
|
};
|
|
70
|
+
export declare const lineSelectedGroupsData: ({
|
|
71
|
+
group: string;
|
|
72
|
+
key: string;
|
|
73
|
+
value: number;
|
|
74
|
+
audienceSize?: undefined;
|
|
75
|
+
} | {
|
|
76
|
+
group: string;
|
|
77
|
+
key: string;
|
|
78
|
+
value: number;
|
|
79
|
+
audienceSize: number;
|
|
80
|
+
})[];
|
|
81
|
+
export declare const lineSelectedGroupsOptions: {
|
|
82
|
+
title: string;
|
|
83
|
+
data: {
|
|
84
|
+
selectedGroups: string[];
|
|
85
|
+
};
|
|
86
|
+
axes: {
|
|
87
|
+
bottom: {
|
|
88
|
+
title: string;
|
|
89
|
+
mapsTo: string;
|
|
90
|
+
scaleType: string;
|
|
91
|
+
};
|
|
92
|
+
left: {
|
|
93
|
+
mapsTo: string;
|
|
94
|
+
title: string;
|
|
95
|
+
scaleType: string;
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
};
|
|
70
99
|
export declare const lineTimeSeriesData: {
|
|
71
100
|
group: string;
|
|
72
101
|
date: Date;
|
|
@@ -67,6 +67,11 @@ export interface BaseChartOptions {
|
|
|
67
67
|
* used to simulate data loading
|
|
68
68
|
*/
|
|
69
69
|
loading?: Boolean;
|
|
70
|
+
/**
|
|
71
|
+
* options related to pre-selected data groups
|
|
72
|
+
* Remains empty if every legend item is active or dataset doesn't have the data groups.
|
|
73
|
+
*/
|
|
74
|
+
selectedGroups?: string[];
|
|
70
75
|
};
|
|
71
76
|
/**
|
|
72
77
|
* options related to color scales
|
package/build/src/model.d.ts
CHANGED
package/build/src/tools.d.ts
CHANGED
|
@@ -83,13 +83,13 @@ export declare namespace Tools {
|
|
|
83
83
|
*/
|
|
84
84
|
export function convertValueToPercentage(item: any, fullData: any): number;
|
|
85
85
|
/**
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
* Truncate the labels
|
|
87
|
+
* @export
|
|
88
|
+
* @param {any} fullText
|
|
89
|
+
* @param {any} truncationType
|
|
90
|
+
* @param {any} numCharacter
|
|
91
|
+
* @returns Truncated text
|
|
92
|
+
*/
|
|
93
93
|
export function truncateLabel(fullText: any, truncationType: any, numCharacter: any): any;
|
|
94
94
|
/**************************************
|
|
95
95
|
* Object/array related checks *
|