@hestia-earth/ui-components-charts 0.43.32 → 0.43.33

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 CHANGED
@@ -86,6 +86,90 @@ declare const hasNegativeContributions: (data?: BarChartDataItem[]) => boolean;
86
86
  */
87
87
  declare const barDataset: (data: BarChartDataItem[], label?: string, showNegativeValues?: boolean) => ChartDataset;
88
88
 
89
+ interface Point {
90
+ x: number;
91
+ y: number;
92
+ }
93
+ /** What the bivariate chart is given: the reference `[x, y]` pairs, and the reported pair to mark. */
94
+ interface BivariateChartInputs {
95
+ points?: number[][];
96
+ value?: number[];
97
+ xLabel?: string;
98
+ yLabel?: string;
99
+ }
100
+ /**
101
+ * The bivariate chart's data and configuration: one dot per reference pair, and the reported pair
102
+ * on top in orange, so how far it sits from the cloud reads at a glance.
103
+ */
104
+ declare const bivariateChart: (inputs: BivariateChartInputs) => {
105
+ data: {
106
+ datasets: {
107
+ label: string;
108
+ data: Point[];
109
+ showLine: false;
110
+ clip: false;
111
+ pointRadius: number;
112
+ pointBorderWidth: number;
113
+ backgroundColor: string;
114
+ borderColor: string;
115
+ type: "line";
116
+ }[];
117
+ };
118
+ config: {
119
+ type: "line";
120
+ options: {
121
+ events: any[];
122
+ responsive: true;
123
+ plugins: {
124
+ tooltip: {
125
+ enabled: false;
126
+ };
127
+ legend: {
128
+ display: false;
129
+ };
130
+ };
131
+ scales: {
132
+ x: {
133
+ type: "linear";
134
+ display: boolean;
135
+ min: number;
136
+ ticks: {
137
+ font: {
138
+ family: string;
139
+ size: number;
140
+ weight: number;
141
+ };
142
+ color: string;
143
+ callback: (tick: number | string) => string;
144
+ };
145
+ title: {
146
+ display: boolean;
147
+ text: string;
148
+ };
149
+ };
150
+ y: {
151
+ type: "linear";
152
+ display: boolean;
153
+ min: number;
154
+ ticks: {
155
+ font: {
156
+ family: string;
157
+ size: number;
158
+ weight: number;
159
+ };
160
+ color: string;
161
+ callback: (tick: number | string) => string;
162
+ };
163
+ title: {
164
+ display: boolean;
165
+ text: string;
166
+ };
167
+ };
168
+ };
169
+ };
170
+ };
171
+ };
172
+
89
173
  declare enum ColorPalette {
90
174
  categorial = 0,
91
175
  continuous = 1,
@@ -966,4 +1050,4 @@ declare const formatPrecision: (value: string | number | boolean, precision?: st
966
1050
 
967
1051
  declare const registerChart: (items?: ChartComponentLike[]) => () => void;
968
1052
 
969
- export { type AfterBarDrawSettings, type AxisHoverSettings, type AxisLabelEvent, type BarChartDataItem, type ChartExportMetadata, ChartNodeType, ColorPalette, type ContributionChartDataItem, type ContributionChartSettings, type ContributionTooltipData, type DistributionChartInputs, type HierarchyChartOptions, type HierarchyTipData, type HierarchyTooltip, type HierarchyUrls, type HistogramChartDataItem, type IChartData, type IChartInputLog, type IContributionCategory, type IContributionLog, type IEmissionCategory, type INodeContributions, type ITermMapping, type LollipopPluginSettings, type NodeDatum, type RgbColor, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, type contributions, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, type term, toLine, valueRatio, withOthers };
1053
+ export { type AfterBarDrawSettings, type AxisHoverSettings, type AxisLabelEvent, type BarChartDataItem, type BivariateChartInputs, type ChartExportMetadata, ChartNodeType, ColorPalette, type ContributionChartDataItem, type ContributionChartSettings, type ContributionTooltipData, type DistributionChartInputs, type HierarchyChartOptions, type HierarchyTipData, type HierarchyTooltip, type HierarchyUrls, type HistogramChartDataItem, type IChartData, type IChartInputLog, type IContributionCategory, type IContributionLog, type IEmissionCategory, type INodeContributions, type ITermMapping, type LollipopPluginSettings, type NodeDatum, type RgbColor, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, bivariateChart, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, type contributions, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, type term, toLine, valueRatio, withOthers };
package/dist/index.d.ts CHANGED
@@ -86,6 +86,90 @@ declare const hasNegativeContributions: (data?: BarChartDataItem[]) => boolean;
86
86
  */
87
87
  declare const barDataset: (data: BarChartDataItem[], label?: string, showNegativeValues?: boolean) => ChartDataset;
88
88
 
89
+ interface Point {
90
+ x: number;
91
+ y: number;
92
+ }
93
+ /** What the bivariate chart is given: the reference `[x, y]` pairs, and the reported pair to mark. */
94
+ interface BivariateChartInputs {
95
+ points?: number[][];
96
+ value?: number[];
97
+ xLabel?: string;
98
+ yLabel?: string;
99
+ }
100
+ /**
101
+ * The bivariate chart's data and configuration: one dot per reference pair, and the reported pair
102
+ * on top in orange, so how far it sits from the cloud reads at a glance.
103
+ */
104
+ declare const bivariateChart: (inputs: BivariateChartInputs) => {
105
+ data: {
106
+ datasets: {
107
+ label: string;
108
+ data: Point[];
109
+ showLine: false;
110
+ clip: false;
111
+ pointRadius: number;
112
+ pointBorderWidth: number;
113
+ backgroundColor: string;
114
+ borderColor: string;
115
+ type: "line";
116
+ }[];
117
+ };
118
+ config: {
119
+ type: "line";
120
+ options: {
121
+ events: any[];
122
+ responsive: true;
123
+ plugins: {
124
+ tooltip: {
125
+ enabled: false;
126
+ };
127
+ legend: {
128
+ display: false;
129
+ };
130
+ };
131
+ scales: {
132
+ x: {
133
+ type: "linear";
134
+ display: boolean;
135
+ min: number;
136
+ ticks: {
137
+ font: {
138
+ family: string;
139
+ size: number;
140
+ weight: number;
141
+ };
142
+ color: string;
143
+ callback: (tick: number | string) => string;
144
+ };
145
+ title: {
146
+ display: boolean;
147
+ text: string;
148
+ };
149
+ };
150
+ y: {
151
+ type: "linear";
152
+ display: boolean;
153
+ min: number;
154
+ ticks: {
155
+ font: {
156
+ family: string;
157
+ size: number;
158
+ weight: number;
159
+ };
160
+ color: string;
161
+ callback: (tick: number | string) => string;
162
+ };
163
+ title: {
164
+ display: boolean;
165
+ text: string;
166
+ };
167
+ };
168
+ };
169
+ };
170
+ };
171
+ };
172
+
89
173
  declare enum ColorPalette {
90
174
  categorial = 0,
91
175
  continuous = 1,
@@ -966,4 +1050,4 @@ declare const formatPrecision: (value: string | number | boolean, precision?: st
966
1050
 
967
1051
  declare const registerChart: (items?: ChartComponentLike[]) => () => void;
968
1052
 
969
- export { type AfterBarDrawSettings, type AxisHoverSettings, type AxisLabelEvent, type BarChartDataItem, type ChartExportMetadata, ChartNodeType, ColorPalette, type ContributionChartDataItem, type ContributionChartSettings, type ContributionTooltipData, type DistributionChartInputs, type HierarchyChartOptions, type HierarchyTipData, type HierarchyTooltip, type HierarchyUrls, type HistogramChartDataItem, type IChartData, type IChartInputLog, type IContributionCategory, type IContributionLog, type IEmissionCategory, type INodeContributions, type ITermMapping, type LollipopPluginSettings, type NodeDatum, type RgbColor, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, type contributions, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, type term, toLine, valueRatio, withOthers };
1053
+ export { type AfterBarDrawSettings, type AxisHoverSettings, type AxisLabelEvent, type BarChartDataItem, type BivariateChartInputs, type ChartExportMetadata, ChartNodeType, ColorPalette, type ContributionChartDataItem, type ContributionChartSettings, type ContributionTooltipData, type DistributionChartInputs, type HierarchyChartOptions, type HierarchyTipData, type HierarchyTooltip, type HierarchyUrls, type HistogramChartDataItem, type IChartData, type IChartInputLog, type IContributionCategory, type IContributionLog, type IEmissionCategory, type INodeContributions, type ITermMapping, type LollipopPluginSettings, type NodeDatum, type RgbColor, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, bivariateChart, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, type contributions, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, type term, toLine, valueRatio, withOthers };
package/dist/index.js CHANGED
@@ -133,6 +133,74 @@ var barDataset = (data2, label = "", showNegativeValues = true) => ({
133
133
  data: data2.map(({ count }) => utils.toPrecision(showNegativeValues ? count : Math.max(0, count))),
134
134
  label
135
135
  });
136
+ var parsePrecision = (value, precision = 3) => utils.toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
137
+ var formatPrecision = (value, precision = 3, enableComma = true) => typeof value !== "boolean" && !utils.isUndefined(value) && utils.isNumber(value) ? `${(enableComma ? utils.toComma : (v) => v)(parsePrecision(value, precision))}`.replace(/\.00$/, "") : value;
138
+
139
+ // src/charts/bivariate.ts
140
+ var colors = {
141
+ lightBlue: "rgba(132, 160, 220, 0.6)",
142
+ orange: "rgba(255, 136, 27, 1)"
143
+ };
144
+ var toPoint = ([x, y]) => ({ x, y });
145
+ var isPair = (pair) => (pair == null ? void 0 : pair.length) === 2 && pair.every(Number.isFinite);
146
+ var axis = (label) => ({
147
+ type: "linear",
148
+ display: true,
149
+ // both axes are physical amounts, which cannot be negative
150
+ min: 0,
151
+ ticks: {
152
+ font: {
153
+ family: defaultTicksFont.family,
154
+ size: 10,
155
+ weight: 400
156
+ },
157
+ color: "#4A4A4A",
158
+ callback: (tick) => `${formatPrecision(tick, 3, true)}`
159
+ },
160
+ title: {
161
+ display: !!label,
162
+ text: label
163
+ }
164
+ });
165
+ var bivariateConfig = ({ xLabel, yLabel }) => ({
166
+ type: "line",
167
+ options: {
168
+ events: [],
169
+ responsive: true,
170
+ plugins: {
171
+ tooltip: { enabled: false },
172
+ legend: { display: false }
173
+ },
174
+ scales: {
175
+ x: axis(xLabel),
176
+ y: axis(yLabel)
177
+ }
178
+ }
179
+ });
180
+ var scatterDataset = (label, data2, color, pointRadius) => ({
181
+ label,
182
+ data: data2,
183
+ showLine: false,
184
+ // the axes start at 0, where many Cycles sit: let their dots overlap the edge rather than be cut
185
+ clip: false,
186
+ pointRadius,
187
+ pointBorderWidth: 0,
188
+ backgroundColor: color,
189
+ borderColor: color,
190
+ type: "line"
191
+ });
192
+ var bivariateChart = (inputs) => {
193
+ var _a;
194
+ return {
195
+ data: {
196
+ datasets: [
197
+ ...isPair(inputs.value) ? [scatterDataset("Value", [toPoint(inputs.value)], colors.orange, 6)] : [],
198
+ scatterDataset("Distribution", ((_a = inputs.points) != null ? _a : []).filter(isPair).map(toPoint), colors.lightBlue, 3)
199
+ ]
200
+ },
201
+ config: bivariateConfig(inputs)
202
+ };
203
+ };
136
204
  var ColorPalette = /* @__PURE__ */ ((ColorPalette2) => {
137
205
  ColorPalette2[ColorPalette2["categorial"] = 0] = "categorial";
138
206
  ColorPalette2[ColorPalette2["continuous"] = 1] = "continuous";
@@ -178,20 +246,20 @@ var palette = Object.freeze({
178
246
  ]
179
247
  });
180
248
  var getGradients = (...colours) => new Gradient__default.default().setColorGradient(...colours).setMidpoint(10).getColors();
181
- var getColorGradient = (index, colors2) => {
182
- const start = colors2[index % colors2.length];
183
- const end = colors2[index % colors2.length + 1];
184
- const gradientIndex = Math.ceil(index / colors2.length);
249
+ var getColorGradient = (index, colors3) => {
250
+ const start = colors3[index % colors3.length];
251
+ const end = colors3[index % colors3.length + 1];
252
+ const gradientIndex = Math.ceil(index / colors3.length);
185
253
  return getGradients(start, end)[gradientIndex];
186
254
  };
187
- var getColorShade = (index, colors2) => {
188
- const color = colors2[index % colors2.length];
189
- const shade = Math.min(100, Math.max(10, Math.abs(100 - Math.ceil(index / colors2.length) * 10)));
255
+ var getColorShade = (index, colors3) => {
256
+ const color = colors3[index % colors3.length];
257
+ const shade = Math.min(100, Math.max(10, Math.abs(100 - Math.ceil(index / colors3.length) * 10)));
190
258
  return shadeGenerator.ShadeGenerator.hue(color).shade(`${shade}`).hex();
191
259
  };
192
260
  var getColor = (index, scheme = 0 /* categorial */) => {
193
- const colors2 = palette[scheme];
194
- return index < colors2.length ? colors2[index] : scheme === 0 /* categorial */ ? getColorShade(index, colors2) : getColorGradient(index, colors2);
261
+ const colors3 = palette[scheme];
262
+ return index < colors3.length ? colors3[index] : scheme === 0 /* categorial */ ? getColorShade(index, colors3) : getColorGradient(index, colors3);
195
263
  };
196
264
  var listColor = (_v, index) => getColor(index);
197
265
  var listColorContinuous = (_v, index) => getColor(index, 1 /* continuous */);
@@ -666,8 +734,6 @@ var increaseScaleLimits = (scale, handleMinScaleZero = true) => {
666
734
  scale.min -= handleMinScaleZero && scale.min === 0 ? 0 : padding2;
667
735
  scale.max += padding2;
668
736
  };
669
- var parsePrecision = (value, precision = 3) => utils.toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
670
- var formatPrecision = (value, precision = 3, enableComma = true) => typeof value !== "boolean" && !utils.isUndefined(value) && utils.isNumber(value) ? `${(enableComma ? utils.toComma : (v) => v)(parsePrecision(value, precision))}`.replace(/\.00$/, "") : value;
671
737
 
672
738
  // src/charts/contribution-chart.ts
673
739
  var grey2 = "#4a4a4a";
@@ -774,14 +840,14 @@ var contributionData = (data2, labels) => ({
774
840
  });
775
841
  var contributionChartConfig = ({
776
842
  onClick,
777
- axis,
843
+ axis: axis2,
778
844
  label,
779
845
  hasNegativeValues: negative,
780
846
  mobile
781
847
  }) => ({
782
848
  options: {
783
849
  onClick,
784
- plugins: { axisHover: axis },
850
+ plugins: { axisHover: axis2 },
785
851
  scales: {
786
852
  x: {
787
853
  display: !mobile,
@@ -805,7 +871,7 @@ var contributionChartConfig = ({
805
871
  placement: "right",
806
872
  textFn: ({ data: data2 }) => utils.isUndefined(data2) ? "No data" : ""
807
873
  }),
808
- ...axis ? [axisHoverPlugin] : []
874
+ ...axis2 ? [axisHoverPlugin] : []
809
875
  ]
810
876
  });
811
877
  var d3ellipse = (selection, maxWidth, ellipsisStr = "...") => {
@@ -859,7 +925,7 @@ var d3wrap = (t, {
859
925
  t.selectAll("tspan").attr("y", yOffset);
860
926
  }
861
927
  };
862
- var colors = {
928
+ var colors2 = {
863
929
  darkBlue: "rgba(25, 57, 87, 1)",
864
930
  lightBlue: "rgba(132, 160, 220, 1)",
865
931
  // `$warning` — marks the reported value, and is the one colour that reads against both a white
@@ -943,7 +1009,7 @@ var distributionAnnotations = (min, max, value, mean) => ({
943
1009
  type: "box",
944
1010
  xMin: min,
945
1011
  xMax: max,
946
- backgroundColor: opaqueColor(colors.lightBlue, 0.3),
1012
+ backgroundColor: opaqueColor(colors2.lightBlue, 0.3),
947
1013
  borderWidth: 0,
948
1014
  drawTime: "beforeDatasetsDraw"
949
1015
  }
@@ -953,15 +1019,15 @@ var distributionAnnotations = (min, max, value, mean) => ({
953
1019
  type: "line",
954
1020
  xMin: mean,
955
1021
  xMax: mean,
956
- borderColor: colors.lightBlue,
1022
+ borderColor: colors2.lightBlue,
957
1023
  borderWidth: 1,
958
1024
  borderDash: [4, 4],
959
1025
  label: {
960
1026
  display: true,
961
1027
  content: "average",
962
1028
  position: "start",
963
- backgroundColor: colors.lightBlue,
964
- color: colors.darkBlue,
1029
+ backgroundColor: colors2.lightBlue,
1030
+ color: colors2.darkBlue,
965
1031
  font: { size: 9 }
966
1032
  }
967
1033
  }
@@ -971,13 +1037,13 @@ var distributionAnnotations = (min, max, value, mean) => ({
971
1037
  type: "line",
972
1038
  xMin: value,
973
1039
  xMax: value,
974
- borderColor: colors.orange,
1040
+ borderColor: colors2.orange,
975
1041
  borderWidth: 2,
976
1042
  label: {
977
1043
  display: true,
978
1044
  content: `${formatPrecision(value, 3, true)}`,
979
1045
  position: "start",
980
- backgroundColor: colors.orange,
1046
+ backgroundColor: colors2.orange,
981
1047
  color: "#fff",
982
1048
  font: { size: 10 }
983
1049
  }
@@ -1083,16 +1149,16 @@ var histogramDatasets = (frequencies) => [
1083
1149
  {
1084
1150
  label: "Distribution",
1085
1151
  data: frequencies,
1086
- backgroundColor: opaqueColor(colors.lightBlue),
1087
- borderColor: colors.lightBlue,
1152
+ backgroundColor: opaqueColor(colors2.lightBlue),
1153
+ borderColor: colors2.lightBlue,
1088
1154
  borderWidth: 1,
1089
1155
  type: "bar"
1090
1156
  },
1091
1157
  {
1092
1158
  label: "Distribution",
1093
1159
  data: frequencies,
1094
- backgroundColor: opaqueColor(colors.darkBlue),
1095
- borderColor: colors.darkBlue,
1160
+ backgroundColor: opaqueColor(colors2.darkBlue),
1161
+ borderColor: colors2.darkBlue,
1096
1162
  borderWidth: 1,
1097
1163
  fill: false,
1098
1164
  pointRadius: 0,
@@ -1104,8 +1170,8 @@ var valueDataset = (singlePoint) => (singlePoint == null ? void 0 : singlePoint.
1104
1170
  label: "Value",
1105
1171
  data: singlePoint,
1106
1172
  fill: false,
1107
- borderColor: colors.darkBlue,
1108
- backgroundColor: colors.darkBlue,
1173
+ borderColor: colors2.darkBlue,
1174
+ backgroundColor: colors2.darkBlue,
1109
1175
  pointRadius: 4,
1110
1176
  showLine: false,
1111
1177
  type: "line",
@@ -1127,9 +1193,9 @@ var parametricData = ({ mu, sd, value, minX }) => ({
1127
1193
  {
1128
1194
  label: "Distribution",
1129
1195
  data: createNormalCurve(mu, sd, value, minX),
1130
- backgroundColor: opaqueColor(colors.lightBlue, 0.2),
1196
+ backgroundColor: opaqueColor(colors2.lightBlue, 0.2),
1131
1197
  // light enough to read on a dark panel, dark enough to read on a white one
1132
- borderColor: colors.lightBlue,
1198
+ borderColor: colors2.lightBlue,
1133
1199
  borderWidth: 1,
1134
1200
  fill: true,
1135
1201
  pointRadius: 0,
@@ -2194,6 +2260,7 @@ exports.axisHoverPlugin = axisHoverPlugin;
2194
2260
  exports.axisLabelCursor = axisLabelCursor;
2195
2261
  exports.backgroundHoverPlugin = backgroundHoverPlugin;
2196
2262
  exports.barDataset = barDataset;
2263
+ exports.bivariateChart = bivariateChart;
2197
2264
  exports.breakdownBarText = breakdownBarText;
2198
2265
  exports.breakdownBars = breakdownBars;
2199
2266
  exports.breakdownScale = breakdownScale;
package/dist/index.mjs CHANGED
@@ -122,6 +122,74 @@ var barDataset = (data2, label = "", showNegativeValues = true) => ({
122
122
  data: data2.map(({ count }) => toPrecision(showNegativeValues ? count : Math.max(0, count))),
123
123
  label
124
124
  });
125
+ var parsePrecision = (value, precision = 3) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
126
+ var formatPrecision = (value, precision = 3, enableComma = true) => typeof value !== "boolean" && !isUndefined(value) && isNumber(value) ? `${(enableComma ? toComma : (v) => v)(parsePrecision(value, precision))}`.replace(/\.00$/, "") : value;
127
+
128
+ // src/charts/bivariate.ts
129
+ var colors = {
130
+ lightBlue: "rgba(132, 160, 220, 0.6)",
131
+ orange: "rgba(255, 136, 27, 1)"
132
+ };
133
+ var toPoint = ([x, y]) => ({ x, y });
134
+ var isPair = (pair) => (pair == null ? void 0 : pair.length) === 2 && pair.every(Number.isFinite);
135
+ var axis = (label) => ({
136
+ type: "linear",
137
+ display: true,
138
+ // both axes are physical amounts, which cannot be negative
139
+ min: 0,
140
+ ticks: {
141
+ font: {
142
+ family: defaultTicksFont.family,
143
+ size: 10,
144
+ weight: 400
145
+ },
146
+ color: "#4A4A4A",
147
+ callback: (tick) => `${formatPrecision(tick, 3, true)}`
148
+ },
149
+ title: {
150
+ display: !!label,
151
+ text: label
152
+ }
153
+ });
154
+ var bivariateConfig = ({ xLabel, yLabel }) => ({
155
+ type: "line",
156
+ options: {
157
+ events: [],
158
+ responsive: true,
159
+ plugins: {
160
+ tooltip: { enabled: false },
161
+ legend: { display: false }
162
+ },
163
+ scales: {
164
+ x: axis(xLabel),
165
+ y: axis(yLabel)
166
+ }
167
+ }
168
+ });
169
+ var scatterDataset = (label, data2, color, pointRadius) => ({
170
+ label,
171
+ data: data2,
172
+ showLine: false,
173
+ // the axes start at 0, where many Cycles sit: let their dots overlap the edge rather than be cut
174
+ clip: false,
175
+ pointRadius,
176
+ pointBorderWidth: 0,
177
+ backgroundColor: color,
178
+ borderColor: color,
179
+ type: "line"
180
+ });
181
+ var bivariateChart = (inputs) => {
182
+ var _a;
183
+ return {
184
+ data: {
185
+ datasets: [
186
+ ...isPair(inputs.value) ? [scatterDataset("Value", [toPoint(inputs.value)], colors.orange, 6)] : [],
187
+ scatterDataset("Distribution", ((_a = inputs.points) != null ? _a : []).filter(isPair).map(toPoint), colors.lightBlue, 3)
188
+ ]
189
+ },
190
+ config: bivariateConfig(inputs)
191
+ };
192
+ };
125
193
  var ColorPalette = /* @__PURE__ */ ((ColorPalette2) => {
126
194
  ColorPalette2[ColorPalette2["categorial"] = 0] = "categorial";
127
195
  ColorPalette2[ColorPalette2["continuous"] = 1] = "continuous";
@@ -167,20 +235,20 @@ var palette = Object.freeze({
167
235
  ]
168
236
  });
169
237
  var getGradients = (...colours) => new Gradient().setColorGradient(...colours).setMidpoint(10).getColors();
170
- var getColorGradient = (index, colors2) => {
171
- const start = colors2[index % colors2.length];
172
- const end = colors2[index % colors2.length + 1];
173
- const gradientIndex = Math.ceil(index / colors2.length);
238
+ var getColorGradient = (index, colors3) => {
239
+ const start = colors3[index % colors3.length];
240
+ const end = colors3[index % colors3.length + 1];
241
+ const gradientIndex = Math.ceil(index / colors3.length);
174
242
  return getGradients(start, end)[gradientIndex];
175
243
  };
176
- var getColorShade = (index, colors2) => {
177
- const color = colors2[index % colors2.length];
178
- const shade = Math.min(100, Math.max(10, Math.abs(100 - Math.ceil(index / colors2.length) * 10)));
244
+ var getColorShade = (index, colors3) => {
245
+ const color = colors3[index % colors3.length];
246
+ const shade = Math.min(100, Math.max(10, Math.abs(100 - Math.ceil(index / colors3.length) * 10)));
179
247
  return ShadeGenerator.hue(color).shade(`${shade}`).hex();
180
248
  };
181
249
  var getColor = (index, scheme = 0 /* categorial */) => {
182
- const colors2 = palette[scheme];
183
- return index < colors2.length ? colors2[index] : scheme === 0 /* categorial */ ? getColorShade(index, colors2) : getColorGradient(index, colors2);
250
+ const colors3 = palette[scheme];
251
+ return index < colors3.length ? colors3[index] : scheme === 0 /* categorial */ ? getColorShade(index, colors3) : getColorGradient(index, colors3);
184
252
  };
185
253
  var listColor = (_v, index) => getColor(index);
186
254
  var listColorContinuous = (_v, index) => getColor(index, 1 /* continuous */);
@@ -655,8 +723,6 @@ var increaseScaleLimits = (scale, handleMinScaleZero = true) => {
655
723
  scale.min -= handleMinScaleZero && scale.min === 0 ? 0 : padding2;
656
724
  scale.max += padding2;
657
725
  };
658
- var parsePrecision = (value, precision = 3) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
659
- var formatPrecision = (value, precision = 3, enableComma = true) => typeof value !== "boolean" && !isUndefined(value) && isNumber(value) ? `${(enableComma ? toComma : (v) => v)(parsePrecision(value, precision))}`.replace(/\.00$/, "") : value;
660
726
 
661
727
  // src/charts/contribution-chart.ts
662
728
  var grey2 = "#4a4a4a";
@@ -763,14 +829,14 @@ var contributionData = (data2, labels) => ({
763
829
  });
764
830
  var contributionChartConfig = ({
765
831
  onClick,
766
- axis,
832
+ axis: axis2,
767
833
  label,
768
834
  hasNegativeValues: negative,
769
835
  mobile
770
836
  }) => ({
771
837
  options: {
772
838
  onClick,
773
- plugins: { axisHover: axis },
839
+ plugins: { axisHover: axis2 },
774
840
  scales: {
775
841
  x: {
776
842
  display: !mobile,
@@ -794,7 +860,7 @@ var contributionChartConfig = ({
794
860
  placement: "right",
795
861
  textFn: ({ data: data2 }) => isUndefined(data2) ? "No data" : ""
796
862
  }),
797
- ...axis ? [axisHoverPlugin] : []
863
+ ...axis2 ? [axisHoverPlugin] : []
798
864
  ]
799
865
  });
800
866
  var d3ellipse = (selection, maxWidth, ellipsisStr = "...") => {
@@ -848,7 +914,7 @@ var d3wrap = (t, {
848
914
  t.selectAll("tspan").attr("y", yOffset);
849
915
  }
850
916
  };
851
- var colors = {
917
+ var colors2 = {
852
918
  darkBlue: "rgba(25, 57, 87, 1)",
853
919
  lightBlue: "rgba(132, 160, 220, 1)",
854
920
  // `$warning` — marks the reported value, and is the one colour that reads against both a white
@@ -932,7 +998,7 @@ var distributionAnnotations = (min, max, value, mean) => ({
932
998
  type: "box",
933
999
  xMin: min,
934
1000
  xMax: max,
935
- backgroundColor: opaqueColor(colors.lightBlue, 0.3),
1001
+ backgroundColor: opaqueColor(colors2.lightBlue, 0.3),
936
1002
  borderWidth: 0,
937
1003
  drawTime: "beforeDatasetsDraw"
938
1004
  }
@@ -942,15 +1008,15 @@ var distributionAnnotations = (min, max, value, mean) => ({
942
1008
  type: "line",
943
1009
  xMin: mean,
944
1010
  xMax: mean,
945
- borderColor: colors.lightBlue,
1011
+ borderColor: colors2.lightBlue,
946
1012
  borderWidth: 1,
947
1013
  borderDash: [4, 4],
948
1014
  label: {
949
1015
  display: true,
950
1016
  content: "average",
951
1017
  position: "start",
952
- backgroundColor: colors.lightBlue,
953
- color: colors.darkBlue,
1018
+ backgroundColor: colors2.lightBlue,
1019
+ color: colors2.darkBlue,
954
1020
  font: { size: 9 }
955
1021
  }
956
1022
  }
@@ -960,13 +1026,13 @@ var distributionAnnotations = (min, max, value, mean) => ({
960
1026
  type: "line",
961
1027
  xMin: value,
962
1028
  xMax: value,
963
- borderColor: colors.orange,
1029
+ borderColor: colors2.orange,
964
1030
  borderWidth: 2,
965
1031
  label: {
966
1032
  display: true,
967
1033
  content: `${formatPrecision(value, 3, true)}`,
968
1034
  position: "start",
969
- backgroundColor: colors.orange,
1035
+ backgroundColor: colors2.orange,
970
1036
  color: "#fff",
971
1037
  font: { size: 10 }
972
1038
  }
@@ -1072,16 +1138,16 @@ var histogramDatasets = (frequencies) => [
1072
1138
  {
1073
1139
  label: "Distribution",
1074
1140
  data: frequencies,
1075
- backgroundColor: opaqueColor(colors.lightBlue),
1076
- borderColor: colors.lightBlue,
1141
+ backgroundColor: opaqueColor(colors2.lightBlue),
1142
+ borderColor: colors2.lightBlue,
1077
1143
  borderWidth: 1,
1078
1144
  type: "bar"
1079
1145
  },
1080
1146
  {
1081
1147
  label: "Distribution",
1082
1148
  data: frequencies,
1083
- backgroundColor: opaqueColor(colors.darkBlue),
1084
- borderColor: colors.darkBlue,
1149
+ backgroundColor: opaqueColor(colors2.darkBlue),
1150
+ borderColor: colors2.darkBlue,
1085
1151
  borderWidth: 1,
1086
1152
  fill: false,
1087
1153
  pointRadius: 0,
@@ -1093,8 +1159,8 @@ var valueDataset = (singlePoint) => (singlePoint == null ? void 0 : singlePoint.
1093
1159
  label: "Value",
1094
1160
  data: singlePoint,
1095
1161
  fill: false,
1096
- borderColor: colors.darkBlue,
1097
- backgroundColor: colors.darkBlue,
1162
+ borderColor: colors2.darkBlue,
1163
+ backgroundColor: colors2.darkBlue,
1098
1164
  pointRadius: 4,
1099
1165
  showLine: false,
1100
1166
  type: "line",
@@ -1116,9 +1182,9 @@ var parametricData = ({ mu, sd, value, minX }) => ({
1116
1182
  {
1117
1183
  label: "Distribution",
1118
1184
  data: createNormalCurve(mu, sd, value, minX),
1119
- backgroundColor: opaqueColor(colors.lightBlue, 0.2),
1185
+ backgroundColor: opaqueColor(colors2.lightBlue, 0.2),
1120
1186
  // light enough to read on a dark panel, dark enough to read on a white one
1121
- borderColor: colors.lightBlue,
1187
+ borderColor: colors2.lightBlue,
1122
1188
  borderWidth: 1,
1123
1189
  fill: true,
1124
1190
  pointRadius: 0,
@@ -2176,4 +2242,4 @@ var registerChart = (items = []) => () => {
2176
2242
  );
2177
2243
  };
2178
2244
 
2179
- export { ChartNodeType, ColorPalette, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, toLine, valueRatio, withOthers };
2245
+ export { ChartNodeType, ColorPalette, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, barDataset, bivariateChart, breakdownBarText, breakdownBars, breakdownScale, breakdownTooltip, categoryLabel, categoryValues, chartBreakdownLabel, chartLabel, chartLabelMaxLength, colorToRgba, contributionBarHeight, contributionChartConfig, contributionChartHeight, contributionCsv, contributionData, contributionHoverHeight, contributionItemColor, convertToSvg, d3ellipse, d3wrap, dataAtIndex, datasetCenter, defaultBarDatasets, defaultBarSettings, defaultChartSettings, defaultContributionSettings, defaultDistributionSettings, defaultHorizontalBarConfig, defaultHorizontalTooltip, defaultIndicatorsModelId, defaultIndicatorsModelName, defaultLineSettings, defaultModelId, defaultTicksFont, distributionChart, downloadFile, downloadPng, downloadSvg, drawHierarchyChart, emissionCategories, emissionCategoriesOf, emissionCategoryValue, escape, exportAsSVG, formatPrecision, getColor, getUnitsAndLabel, groupDataByCategory, groupIndicators, groupLogsById, hasNegativeContributions, hasNegativeValues, hexToRgba, hierarchyChildren, hierarchyContributions, hierarchyCsv, hierarchyData, hierarchyLegend, hierarchyModels, hierarchyTermTypes, hierarchyWarnings, horizontalBarHeight, increaseScaleLimits, indicatorLogs, isParametric, legend, linkIndicators, listColor, listColorContinuous, listColorWithAlpha, logToCsv, logsTotalValue, lollipopChartPlugin, missingTermIds, namedContributors, nodeBorderColours, nodeColours, nonLCAIndicatorsId, nonZeroContributors, parseColor, parseContributions, registerChart, sumIndicators, sumValues, toLine, valueRatio, withOthers };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hestia-earth/ui-components-charts",
3
- "version": "0.43.32",
3
+ "version": "0.43.33",
4
4
  "description": "The charts of the HESTIA platform without Angular or a stylesheet: their data, Chart.js configuration, plugins, d3 hierarchy and exports",
5
5
  "repository": {
6
6
  "type": "git",