@hestia-earth/ui-components-charts 0.43.23
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/dist/index.d.mts +368 -0
- package/dist/index.d.ts +368 -0
- package/dist/index.js +834 -0
- package/dist/index.mjs +781 -0
- package/package.json +43 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,368 @@
|
|
|
1
|
+
import * as chart_js from 'chart.js';
|
|
2
|
+
import { ChartDataset, Chart, BarOptions, Plugin, ChartEvent, Color, Scale } from 'chart.js';
|
|
3
|
+
import { IImpactAssessmentJSONLD } from '@hestia-earth/schema';
|
|
4
|
+
|
|
5
|
+
interface BarChartDataItem {
|
|
6
|
+
label?: string;
|
|
7
|
+
count?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
backgroundColor?: string;
|
|
10
|
+
borderColor?: string;
|
|
11
|
+
includedItems?: BarChartDataItem[];
|
|
12
|
+
}
|
|
13
|
+
declare const defaultBarSettings: Readonly<{
|
|
14
|
+
type: "bar";
|
|
15
|
+
options: {
|
|
16
|
+
animation: {
|
|
17
|
+
duration: number;
|
|
18
|
+
};
|
|
19
|
+
plugins: {
|
|
20
|
+
legend: {
|
|
21
|
+
align: "start";
|
|
22
|
+
};
|
|
23
|
+
tooltip: {
|
|
24
|
+
enabled: false;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
scales: {
|
|
28
|
+
x: {
|
|
29
|
+
display: true;
|
|
30
|
+
min: number;
|
|
31
|
+
title: {
|
|
32
|
+
display: false;
|
|
33
|
+
color: string;
|
|
34
|
+
font: {
|
|
35
|
+
family: string;
|
|
36
|
+
size: number;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
ticks: {
|
|
40
|
+
font: {
|
|
41
|
+
family: string;
|
|
42
|
+
size: number;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
y: {
|
|
47
|
+
display: true;
|
|
48
|
+
position: "left";
|
|
49
|
+
border: {
|
|
50
|
+
display: true;
|
|
51
|
+
};
|
|
52
|
+
grid: {
|
|
53
|
+
display: true;
|
|
54
|
+
drawOnChartArea: true;
|
|
55
|
+
drawTicks: true;
|
|
56
|
+
tickLength: number;
|
|
57
|
+
offset: false;
|
|
58
|
+
};
|
|
59
|
+
ticks: {
|
|
60
|
+
color: string;
|
|
61
|
+
padding: number;
|
|
62
|
+
crossAlign: "center";
|
|
63
|
+
font: {
|
|
64
|
+
weight: number;
|
|
65
|
+
family: string;
|
|
66
|
+
size: number;
|
|
67
|
+
};
|
|
68
|
+
callback: (this: chart_js.Scale, value: string | number) => string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
}>;
|
|
74
|
+
declare const defaultBarDatasets: Partial<ChartDataset>;
|
|
75
|
+
/**
|
|
76
|
+
* The first `maximum` items, and one more summing the rest as "N others", which lists them as its own items.
|
|
77
|
+
*/
|
|
78
|
+
declare const withOthers: (data: BarChartDataItem[], maximum: number) => BarChartDataItem[];
|
|
79
|
+
declare const hasNegativeContributions: (data?: BarChartDataItem[]) => boolean;
|
|
80
|
+
/**
|
|
81
|
+
* The one dataset drawn from the items, coloured per item; negative values become `0` unless shown.
|
|
82
|
+
*/
|
|
83
|
+
declare const barDataset: (data: BarChartDataItem[], label?: string, showNegativeValues?: boolean) => ChartDataset;
|
|
84
|
+
|
|
85
|
+
declare enum ColorPalette {
|
|
86
|
+
categorial = 0,
|
|
87
|
+
continuous = 1,
|
|
88
|
+
divergent = 2
|
|
89
|
+
}
|
|
90
|
+
declare const getColor: (index: number, scheme?: ColorPalette) => string;
|
|
91
|
+
declare const listColor: <T>(_v: T, index: number) => string;
|
|
92
|
+
declare const listColorContinuous: <T>(_v: T, index: number) => string;
|
|
93
|
+
interface RgbColor {
|
|
94
|
+
r: number;
|
|
95
|
+
g: number;
|
|
96
|
+
b: number;
|
|
97
|
+
}
|
|
98
|
+
declare const parseColor: (color: string) => RgbColor;
|
|
99
|
+
declare const colorToRgba: (color: RgbColor, aplha: number) => string;
|
|
100
|
+
declare const hexToRgba: (hex: string, aplha?: number) => string;
|
|
101
|
+
declare const listColorWithAlpha: (alpha?: number) => <T>(_v: T, index: number) => string;
|
|
102
|
+
|
|
103
|
+
declare const defaultTicksFont: {
|
|
104
|
+
family: string;
|
|
105
|
+
size: number;
|
|
106
|
+
};
|
|
107
|
+
/**
|
|
108
|
+
* Maximum length of an axis label, past which the charts truncate it.
|
|
109
|
+
*/
|
|
110
|
+
declare const chartLabelMaxLength = 50;
|
|
111
|
+
|
|
112
|
+
interface ContributionChartDataItem {
|
|
113
|
+
id?: string;
|
|
114
|
+
label: string;
|
|
115
|
+
values: number[];
|
|
116
|
+
color?: string;
|
|
117
|
+
backgroundColor?: string;
|
|
118
|
+
borderColor?: string;
|
|
119
|
+
includedItems?: ContributionChartDataItem[];
|
|
120
|
+
}
|
|
121
|
+
interface ContributionTooltipData {
|
|
122
|
+
label: string;
|
|
123
|
+
units: string;
|
|
124
|
+
values: (ContributionChartDataItem & {
|
|
125
|
+
value: number;
|
|
126
|
+
})[];
|
|
127
|
+
selectedLabel?: string;
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* The subset of the `CyclesEmissionsCategoryService` needed to group the data.
|
|
131
|
+
*/
|
|
132
|
+
interface IContributionCategory {
|
|
133
|
+
emissionCategoryValue: (emissionId: string, category: string) => string;
|
|
134
|
+
categoryLabel: (key: string) => string;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Sum the values of every item of a group, skipping the items without a value at this index.
|
|
138
|
+
*
|
|
139
|
+
* An item has no value when the Node does not contain that Emission at all, which is not the same as a `0` value:
|
|
140
|
+
* summing it as `NaN` would silently hide the whole group from the chart. When no item of the group has a value,
|
|
141
|
+
* `undefined` is returned so the chart displays "No data", like it does when the data is not grouped.
|
|
142
|
+
*
|
|
143
|
+
* @param values The values of every item of the group, at a single index.
|
|
144
|
+
* @returns The sum, or `undefined` when no item has a value.
|
|
145
|
+
*/
|
|
146
|
+
declare const sumValues: (values: number[]) => number;
|
|
147
|
+
/**
|
|
148
|
+
* Group the contribution data by Category, summing the values of every Emission of the same Category.
|
|
149
|
+
*
|
|
150
|
+
* @param data The contribution data, one item per Emission.
|
|
151
|
+
* @param labels The labels of the chart, one per Node compared.
|
|
152
|
+
* @param category The Category to group by. When empty, the data is returned as-is.
|
|
153
|
+
* @param service Used to resolve the Category of an Emission and its label.
|
|
154
|
+
* @returns The data grouped by Category, or the original data when grouping is not needed.
|
|
155
|
+
*/
|
|
156
|
+
declare const groupDataByCategory: (data: ContributionChartDataItem[], labels: string[], category: string, { emissionCategoryValue, categoryLabel }: IContributionCategory) => ContributionChartDataItem[];
|
|
157
|
+
|
|
158
|
+
declare const escape: (value: string) => string;
|
|
159
|
+
declare const toLine: (values: any[]) => string;
|
|
160
|
+
|
|
161
|
+
interface IEmissionCategory {
|
|
162
|
+
key: string;
|
|
163
|
+
label: string;
|
|
164
|
+
}
|
|
165
|
+
declare const categoryLabel: (key: string) => string;
|
|
166
|
+
/**
|
|
167
|
+
* The list of all available categories.
|
|
168
|
+
*/
|
|
169
|
+
declare const emissionCategories: IEmissionCategory[];
|
|
170
|
+
/**
|
|
171
|
+
* Return all possible values for a specific Category.
|
|
172
|
+
*
|
|
173
|
+
* @param category {string} The specific category
|
|
174
|
+
* @returns List of all values possible for this Category.
|
|
175
|
+
*/
|
|
176
|
+
declare const categoryValues: (category: string) => string[];
|
|
177
|
+
/**
|
|
178
|
+
* Return the different categories available for a single Emission.
|
|
179
|
+
*
|
|
180
|
+
* @param emissionId The `@id` of the Emission
|
|
181
|
+
* @returns List of categories.
|
|
182
|
+
*/
|
|
183
|
+
declare const emissionCategoriesOf: (emissionId: string) => string[];
|
|
184
|
+
/**
|
|
185
|
+
* Return the Category value for a specific Emission and Category.
|
|
186
|
+
*
|
|
187
|
+
* @param emissionId The `@id` of the Emission
|
|
188
|
+
* @param category The Category
|
|
189
|
+
* @returns The value
|
|
190
|
+
*/
|
|
191
|
+
declare const emissionCategoryValue: (emissionId: string, category: string) => string;
|
|
192
|
+
|
|
193
|
+
declare const defaultHorizontalBarConfig: Readonly<{
|
|
194
|
+
options: {
|
|
195
|
+
indexAxis: "y";
|
|
196
|
+
scales: {
|
|
197
|
+
x: {
|
|
198
|
+
grid: {
|
|
199
|
+
drawOnChartArea: false;
|
|
200
|
+
};
|
|
201
|
+
ticks: {
|
|
202
|
+
callback: (this: chart_js.Scale, value: string | number) => number;
|
|
203
|
+
};
|
|
204
|
+
};
|
|
205
|
+
y: {
|
|
206
|
+
grid: {
|
|
207
|
+
drawOnChartArea: false;
|
|
208
|
+
};
|
|
209
|
+
ticks: {
|
|
210
|
+
crossAlign: "near";
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
};
|
|
214
|
+
};
|
|
215
|
+
}>;
|
|
216
|
+
/** The text of the tooltip on one bar: its label and value, or every item it groups. */
|
|
217
|
+
declare const defaultHorizontalTooltip: ({ label, count, includedItems }: BarChartDataItem) => string;
|
|
218
|
+
/** The chart's height for this many bars, kept between the two bounds. */
|
|
219
|
+
declare const horizontalBarHeight: (minHeight: number, maxHeight: number, nbRows: number) => number;
|
|
220
|
+
|
|
221
|
+
type placement = 'left' | 'right';
|
|
222
|
+
type positionFn = (n: number, index: number, width: number, chart: Chart, data?: number | number[], placement?: placement) => number;
|
|
223
|
+
interface AfterBarDrawSettings {
|
|
224
|
+
placement?: placement;
|
|
225
|
+
xPosFn?: positionFn;
|
|
226
|
+
yPosFn?: positionFn;
|
|
227
|
+
colorFn?: (m: BarOptions, index: number, chart: Chart, data?: number) => string;
|
|
228
|
+
textFn?: (m: {
|
|
229
|
+
label: string;
|
|
230
|
+
data: number | number[];
|
|
231
|
+
}, index: number, chart: Chart) => string | [string, string];
|
|
232
|
+
font?: string;
|
|
233
|
+
maxWidth?: number;
|
|
234
|
+
emptyValueLabel?: string;
|
|
235
|
+
}
|
|
236
|
+
declare const afterBarDrawPlugin: (settings?: AfterBarDrawSettings) => Plugin;
|
|
237
|
+
|
|
238
|
+
interface AxisLabelEvent {
|
|
239
|
+
label: string;
|
|
240
|
+
index: number;
|
|
241
|
+
/**
|
|
242
|
+
* The middle of the label column at the bottom edge of the row — the point a tooltip should hang
|
|
243
|
+
* off. Anchoring on the pointer instead puts the tooltip on the label being read, because a row
|
|
244
|
+
* is entered at the top of its hit band when the pointer is moving down.
|
|
245
|
+
*/
|
|
246
|
+
anchorX: number;
|
|
247
|
+
anchorY: number;
|
|
248
|
+
event: ChartEvent;
|
|
249
|
+
}
|
|
250
|
+
interface AxisHoverSettings {
|
|
251
|
+
onHoverLabel?: (data: AxisLabelEvent) => void;
|
|
252
|
+
onClickLabel?: (data: AxisLabelEvent) => void;
|
|
253
|
+
maxDistance?: number;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Hover handler turning the pointer into a cursor over a clickable axis label.
|
|
257
|
+
*/
|
|
258
|
+
declare const axisLabelCursor: ({ label, event }: AxisLabelEvent) => void;
|
|
259
|
+
declare const axisHoverPlugin: Plugin;
|
|
260
|
+
|
|
261
|
+
interface IBackgroundHoverSettings {
|
|
262
|
+
threshold?: number;
|
|
263
|
+
}
|
|
264
|
+
declare const backgroundHoverPlugin: (settings?: IBackgroundHoverSettings) => {
|
|
265
|
+
id: string;
|
|
266
|
+
afterEvent: (chart: Chart, args: {
|
|
267
|
+
event: ChartEvent;
|
|
268
|
+
changed?: boolean;
|
|
269
|
+
}) => void;
|
|
270
|
+
beforeDraw: (chart: Chart) => void;
|
|
271
|
+
};
|
|
272
|
+
|
|
273
|
+
type colorFn = (m: BarOptions, index: number) => Color;
|
|
274
|
+
type positionIndexFn = (x: number, y: number) => number;
|
|
275
|
+
type isMouseInsideLollipopFn = (fn: positionIndexFn) => void;
|
|
276
|
+
type valueFn = (dataset: ChartDataset, index: number, chart: Chart) => number | undefined | null;
|
|
277
|
+
interface LollipopPluginSettings {
|
|
278
|
+
circleRadius?: number;
|
|
279
|
+
/**
|
|
280
|
+
* Use when connecting 2 lollipops.
|
|
281
|
+
*/
|
|
282
|
+
lineWidth?: number;
|
|
283
|
+
colorFn?: colorFn;
|
|
284
|
+
isMouseInsideLollipopFn?: isMouseInsideLollipopFn;
|
|
285
|
+
/**
|
|
286
|
+
* By default, lollipops will be drawn where the value is (or start/end when 2 values are used).
|
|
287
|
+
* Use this function to return a specific value where the lollipop should be drawn.
|
|
288
|
+
*/
|
|
289
|
+
valueFn?: valueFn;
|
|
290
|
+
}
|
|
291
|
+
declare const lollipopChartPlugin: (settings?: LollipopPluginSettings) => Plugin;
|
|
292
|
+
|
|
293
|
+
declare const increaseScaleLimits: (scale: Scale, handleMinScaleZero?: boolean) => void;
|
|
294
|
+
|
|
295
|
+
/** How much each indicator, by its position on the node, contributes to each other indicator, per method. */
|
|
296
|
+
type contributions = Record<string, Record<string, number>>;
|
|
297
|
+
/** The contributions file the engine writes beside an ImpactAssessment. */
|
|
298
|
+
interface INodeContributions {
|
|
299
|
+
/**
|
|
300
|
+
* Contributions of each `emissionsResourceUse` to the `impacts`.
|
|
301
|
+
*/
|
|
302
|
+
emissionsResourceUse: Record<string, contributions>;
|
|
303
|
+
/**
|
|
304
|
+
* Contributions of each `impacts` to the `endpoints`.
|
|
305
|
+
*/
|
|
306
|
+
impacts: Record<string, contributions>;
|
|
307
|
+
}
|
|
308
|
+
/** One contribution of one indicator to another, by one method. */
|
|
309
|
+
interface IContributionLog {
|
|
310
|
+
modelId: string;
|
|
311
|
+
impactTermId: string;
|
|
312
|
+
impactTermUnits?: string;
|
|
313
|
+
blankNodeTermId: string;
|
|
314
|
+
value: number;
|
|
315
|
+
name?: string;
|
|
316
|
+
color?: string;
|
|
317
|
+
inputs?: string[];
|
|
318
|
+
}
|
|
319
|
+
declare const logsTotalValue: (logs: IContributionLog[], includeNegativeValues?: boolean) => number;
|
|
320
|
+
declare const valueRatio: (value: number, total: number) => number;
|
|
321
|
+
declare const chartLabel: (value: number, total: number) => string;
|
|
322
|
+
declare const chartBreakdownLabel: (logs: IContributionLog[], total: number, maxValues: number) => string;
|
|
323
|
+
declare const logToCsv: (logs: IContributionLog[], impact: IImpactAssessmentJSONLD) => string;
|
|
324
|
+
/**
|
|
325
|
+
* Every contribution in the file, joined back to the indicators at the positions it is keyed by: the
|
|
326
|
+
* emissions and resource uses to the impacts, and the impacts to the endpoints.
|
|
327
|
+
*/
|
|
328
|
+
declare const parseContributions: (impactAssessment: IImpactAssessmentJSONLD, contributions: INodeContributions) => IContributionLog[];
|
|
329
|
+
/** One contribution per contributor: its methods' values summed, its inputs merged. */
|
|
330
|
+
declare const groupLogsById: (logs: IContributionLog[]) => IContributionLog[];
|
|
331
|
+
/** The contributions to one indicator, by one method when one is given. */
|
|
332
|
+
declare const indicatorLogs: (logs: IContributionLog[], termId: string, methodId?: string) => IContributionLog[];
|
|
333
|
+
/** The contributors to show: one each, without those contributing nothing. */
|
|
334
|
+
declare const nonZeroContributors: (logs: IContributionLog[]) => IContributionLog[];
|
|
335
|
+
/** Each contributor with the name to show and its colour, in the order given. */
|
|
336
|
+
declare const namedContributors: (logs: IContributionLog[], nameOf: (termId: string) => string | undefined) => {
|
|
337
|
+
name: string;
|
|
338
|
+
color: string;
|
|
339
|
+
modelId: string;
|
|
340
|
+
impactTermId: string;
|
|
341
|
+
impactTermUnits?: string;
|
|
342
|
+
blankNodeTermId: string;
|
|
343
|
+
value: number;
|
|
344
|
+
inputs?: string[];
|
|
345
|
+
}[];
|
|
346
|
+
/**
|
|
347
|
+
* The bars, largest first: one per contributor, or with a category, one per category value summing its
|
|
348
|
+
* contributors and listing them as its items. A category every contributor shares is no grouping at all.
|
|
349
|
+
*/
|
|
350
|
+
declare const breakdownBars: (values: IContributionLog[], category?: string) => BarChartDataItem[];
|
|
351
|
+
/** What each bar says after it: its value, or its share of the total; the "others" bar names its value. */
|
|
352
|
+
declare const breakdownBarText: (displayValue: boolean, total: number, maximumValues: number) => AfterBarDrawSettings;
|
|
353
|
+
/** The tooltip of one bar: its value and share, or every contributor the "others" bar groups. */
|
|
354
|
+
declare const breakdownTooltip: (item: BarChartDataItem | undefined, includedItems: BarChartDataItem[] | undefined, logs: IContributionLog[], total: number, maximumValues: number) => string;
|
|
355
|
+
/** The x axis: from the most negative contribution, or zero, to the largest, with some room on each side. */
|
|
356
|
+
declare const breakdownScale: (values: IContributionLog[]) => {
|
|
357
|
+
options: {
|
|
358
|
+
scales: {
|
|
359
|
+
x: {
|
|
360
|
+
afterDataLimits: (scale: chart_js.Scale<chart_js.CoreScaleOptions>) => void;
|
|
361
|
+
min: number;
|
|
362
|
+
max: number;
|
|
363
|
+
};
|
|
364
|
+
};
|
|
365
|
+
};
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
export { type AfterBarDrawSettings, type AxisHoverSettings, type AxisLabelEvent, type BarChartDataItem, ColorPalette, type ContributionChartDataItem, type ContributionTooltipData, type IContributionCategory, type IContributionLog, type IEmissionCategory, type INodeContributions, type LollipopPluginSettings, type RgbColor, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, type contributions, defaultBarDatasets, defaultBarSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultTicksFont, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, getColor, groupDataByCategory, groupLogsById, hasNegativeContributions, hexToRgba, horizontalBarHeight, increaseScaleLimits, indicatorLogs, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, namedContributors, nonZeroContributors, parseColor, parseContributions, sumValues, toLine, valueRatio, withOthers };
|