abstract-chart 7.5.1 → 8.0.1
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 +41 -0
- package/README.md +15 -18
- package/lib/chart.d.ts +19 -10
- package/lib/chart.d.ts.map +1 -1
- package/lib/chart.js +289 -140
- package/lib/chart.js.map +1 -1
- package/package.json +3 -3
- package/src/chart.ts +453 -173
package/lib/chart.js
CHANGED
|
@@ -23,36 +23,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.generateYAxisLabel = exports.generateYAxisLabels = exports.generateYAxisLines = exports.generateXAxisLabel = exports.generateXAxisLabels = exports.generateXAxisGridLines = exports.generatePoints = exports.generateLines = exports.generateStack = exports.
|
|
26
|
+
exports.generateYAxisLabel = exports.generateYAxisLabels = exports.generateYAxisLines = exports.generateXAxisLabel = exports.generateXAxisLabels = exports.generateXAxisGridLines = exports.generatePoints = exports.generateLines = exports.generateStack = exports.generateDataAxisesY = exports.generateDataAxisesX = exports.generateYAxises = exports.generateXAxises = exports.generateBackground = exports.renderChart = exports.inverseTransformPoint = exports.createChartDataAxis = exports.createChartStack = exports.createChartStackConfig = exports.createChartLine = exports.createChartPoint = exports.createChart = void 0;
|
|
27
|
+
/* eslint-disable max-lines */
|
|
27
28
|
const AI = __importStar(require("abstract-image"));
|
|
28
29
|
const Axis = __importStar(require("./axis"));
|
|
29
30
|
const ts_exhaustive_check_1 = require("ts-exhaustive-check");
|
|
31
|
+
const axisLabelPosFactor = 0.65;
|
|
30
32
|
function createChart(props) {
|
|
31
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
|
|
33
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
|
32
34
|
return {
|
|
33
35
|
width: (_a = props.width) !== null && _a !== void 0 ? _a : 600,
|
|
34
36
|
height: (_b = props.height) !== null && _b !== void 0 ? _b : 600,
|
|
35
37
|
chartPoints: (_c = props.chartPoints) !== null && _c !== void 0 ? _c : [],
|
|
36
38
|
chartLines: (_d = props.chartLines) !== null && _d !== void 0 ? _d : [],
|
|
37
39
|
chartStack: (_e = props.chartStack) !== null && _e !== void 0 ? _e : createChartStack({}),
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
chartDataAxisesBottom: (_f = props.chartDataAxisesBottom) !== null && _f !== void 0 ? _f : [],
|
|
41
|
+
chartDataAxisesTop: (_g = props.chartDataAxisesTop) !== null && _g !== void 0 ? _g : [],
|
|
42
|
+
chartDataAxisesLeft: (_h = props.chartDataAxisesLeft) !== null && _h !== void 0 ? _h : [],
|
|
43
|
+
chartDataAxisesRight: (_j = props.chartDataAxisesRight) !== null && _j !== void 0 ? _j : [],
|
|
44
|
+
xAxisesBottom: (_k = props.xAxisesBottom) !== null && _k !== void 0 ? _k : [],
|
|
45
|
+
xAxisesTop: (_l = props.xAxisesTop) !== null && _l !== void 0 ? _l : [],
|
|
46
|
+
yAxisesLeft: (_m = props.yAxisesLeft) !== null && _m !== void 0 ? _m : [],
|
|
47
|
+
yAxisesRight: (_o = props.yAxisesRight) !== null && _o !== void 0 ? _o : [],
|
|
48
|
+
backgroundColor: (_p = props.backgroundColor) !== null && _p !== void 0 ? _p : AI.white,
|
|
49
|
+
font: (_q = props.font) !== null && _q !== void 0 ? _q : "Arial",
|
|
50
|
+
fontSize: (_r = props.fontSize) !== null && _r !== void 0 ? _r : 12,
|
|
51
|
+
textColor: (_s = props.textColor) !== null && _s !== void 0 ? _s : AI.black,
|
|
52
|
+
textOutlineColor: (_t = props.textOutlineColor) !== null && _t !== void 0 ? _t : AI.transparent,
|
|
53
|
+
labelLayout: (_u = props.labelLayout) !== null && _u !== void 0 ? _u : "original",
|
|
48
54
|
padding: {
|
|
49
|
-
top: (
|
|
50
|
-
right: (
|
|
51
|
-
bottom: (
|
|
52
|
-
left: (
|
|
55
|
+
top: (_w = (_v = props.padding) === null || _v === void 0 ? void 0 : _v.top) !== null && _w !== void 0 ? _w : 10,
|
|
56
|
+
right: (_y = (_x = props.padding) === null || _x === void 0 ? void 0 : _x.right) !== null && _y !== void 0 ? _y : 10,
|
|
57
|
+
bottom: (_0 = (_z = props.padding) === null || _z === void 0 ? void 0 : _z.bottom) !== null && _0 !== void 0 ? _0 : 10,
|
|
58
|
+
left: (_2 = (_1 = props.padding) === null || _1 === void 0 ? void 0 : _1.left) !== null && _2 !== void 0 ? _2 : 10,
|
|
53
59
|
},
|
|
54
|
-
|
|
55
|
-
|
|
60
|
+
axisWidth: (_3 = props.axisWidth) !== null && _3 !== void 0 ? _3 : 80,
|
|
61
|
+
xGrid: { color: (_5 = (_4 = props.xGrid) === null || _4 === void 0 ? void 0 : _4.color) !== null && _5 !== void 0 ? _5 : AI.gray, thickness: (_7 = (_6 = props.xGrid) === null || _6 === void 0 ? void 0 : _6.thickness) !== null && _7 !== void 0 ? _7 : 1 },
|
|
62
|
+
yGrid: { color: (_9 = (_8 = props.yGrid) === null || _8 === void 0 ? void 0 : _8.color) !== null && _9 !== void 0 ? _9 : AI.gray, thickness: (_11 = (_10 = props.yGrid) === null || _10 === void 0 ? void 0 : _10.thickness) !== null && _11 !== void 0 ? _11 : 1 },
|
|
56
63
|
};
|
|
57
64
|
}
|
|
58
65
|
exports.createChart = createChart;
|
|
@@ -90,37 +97,69 @@ function createChartStack(props) {
|
|
|
90
97
|
return { points, xAxis, yAxis, config };
|
|
91
98
|
}
|
|
92
99
|
exports.createChartStack = createChartStack;
|
|
93
|
-
function
|
|
100
|
+
function createChartDataAxis(points, label, labelRotation, tickLabelDisp, labelColor, tickLabelColor, thickness, axisColor, tickFontSize, axisFontSize, id) {
|
|
101
|
+
return {
|
|
102
|
+
points,
|
|
103
|
+
label,
|
|
104
|
+
labelRotation,
|
|
105
|
+
tickLabelDisp,
|
|
106
|
+
labelColor,
|
|
107
|
+
tickLabelColor,
|
|
108
|
+
thickness,
|
|
109
|
+
axisColor,
|
|
110
|
+
tickFontSize,
|
|
111
|
+
axisFontSize,
|
|
112
|
+
id,
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
exports.createChartDataAxis = createChartDataAxis;
|
|
116
|
+
function inverseTransformPoint(point, chart, xAxis, yAxis) {
|
|
117
|
+
const padding = finalPadding(chart);
|
|
94
118
|
const xMin = padding.left;
|
|
95
119
|
const xMax = chart.width - padding.right;
|
|
96
120
|
const yMin = chart.height - padding.bottom;
|
|
97
121
|
const yMax = padding.top;
|
|
98
|
-
const x = Axis.inverseTransformValue(point.x, xMin, xMax, xAxis === "top" ? chart.
|
|
99
|
-
const y = Axis.inverseTransformValue(point.y, yMin, yMax, yAxis === "right" ? chart.
|
|
122
|
+
const x = Axis.inverseTransformValue(point.x, xMin, xMax, xAxis === "top" ? chart.xAxisesTop[0] : chart.xAxisesBottom[0]);
|
|
123
|
+
const y = Axis.inverseTransformValue(point.y, yMin, yMax, yAxis === "right" ? chart.yAxisesRight[0] : chart.yAxisesLeft[0]);
|
|
100
124
|
if (x === undefined || y === undefined) {
|
|
101
125
|
return undefined;
|
|
102
126
|
}
|
|
103
127
|
return AI.createPoint(x, y);
|
|
104
128
|
}
|
|
105
129
|
exports.inverseTransformPoint = inverseTransformPoint;
|
|
130
|
+
function finalPadding(chart) {
|
|
131
|
+
return {
|
|
132
|
+
bottom: chart.padding.bottom + (chart.xAxisesBottom.length + chart.chartDataAxisesBottom.length) * chart.axisWidth,
|
|
133
|
+
top: chart.padding.top + (chart.xAxisesTop.length + chart.chartDataAxisesTop.length) * chart.axisWidth,
|
|
134
|
+
left: chart.padding.left + (chart.yAxisesLeft.length + chart.chartDataAxisesLeft.length) * chart.axisWidth,
|
|
135
|
+
right: chart.padding.right + (chart.yAxisesRight.length + chart.chartDataAxisesRight.length) * chart.axisWidth,
|
|
136
|
+
};
|
|
137
|
+
}
|
|
106
138
|
function renderChart(chart) {
|
|
107
|
-
const { width, height,
|
|
139
|
+
const { width, height, xAxisesBottom, xAxisesTop, yAxisesLeft, yAxisesRight } = chart;
|
|
140
|
+
const padding = finalPadding(chart);
|
|
108
141
|
const gridWidth = width - padding.left - padding.right;
|
|
109
142
|
const gridHeight = height - padding.bottom - padding.top;
|
|
110
143
|
const xMin = padding.left;
|
|
111
|
-
const xMax = width - padding.right;
|
|
112
|
-
const yMin = height - padding.bottom;
|
|
144
|
+
const xMax = chart.width - padding.right;
|
|
145
|
+
const yMin = chart.height - padding.bottom;
|
|
113
146
|
const yMax = padding.top;
|
|
114
147
|
const renderedBackground = generateBackground(xMin, xMax, yMin, yMax, chart);
|
|
115
148
|
const xNumTicks = gridWidth / 40;
|
|
116
|
-
const renderedXAxisBottom =
|
|
117
|
-
const renderedXAxisTop =
|
|
149
|
+
const renderedXAxisBottom = generateXAxises("bottom", xNumTicks, xAxisesBottom, xMin, xMax, yMin, yMax, chart);
|
|
150
|
+
const renderedXAxisTop = generateXAxises("top", xNumTicks, xAxisesTop, xMin, xMax, yMin, yMax, chart);
|
|
118
151
|
const yNumTicks = gridHeight / 40;
|
|
119
|
-
const renderedYAxisLeft =
|
|
120
|
-
const renderedYAxisRight =
|
|
152
|
+
const renderedYAxisLeft = generateYAxises("left", yNumTicks, yAxisesLeft, xMin, xMax, yMin, yMax, chart);
|
|
153
|
+
const renderedYAxisRight = generateYAxises("right", yNumTicks, yAxisesRight, xMin, xMax, yMin, yMax, chart);
|
|
121
154
|
const renderedPoints = generatePoints(xMin, xMax, yMin, yMax, chart);
|
|
122
155
|
const renderedLines = generateLines(xMin, xMax, yMin, yMax, chart);
|
|
123
156
|
const renderedStack = generateStack(xMin, xMax, yMin, yMax, chart);
|
|
157
|
+
const dataNumTicksX = gridWidth / 70;
|
|
158
|
+
const renderedDataAxisesBottom = generateDataAxisesX("bottom", chart.chartDataAxisesBottom, dataNumTicksX, xMin, xMax, yMin, yMax, chart);
|
|
159
|
+
const renderedDataAxisesTop = generateDataAxisesX("top", chart.chartDataAxisesTop, dataNumTicksX, xMin, xMax, yMin, yMax, chart);
|
|
160
|
+
const dataNumTicksY = gridHeight / 70;
|
|
161
|
+
const renderedDataAxisesLeft = generateDataAxisesY("left", chart.chartDataAxisesLeft, dataNumTicksY, xMin, xMax, yMin, yMax, chart);
|
|
162
|
+
const renderedDataAxisesRight = generateDataAxisesY("right", chart.chartDataAxisesRight, dataNumTicksY, xMin, xMax, yMin, yMax, chart);
|
|
124
163
|
const components = [
|
|
125
164
|
renderedBackground,
|
|
126
165
|
renderedXAxisBottom,
|
|
@@ -130,6 +169,10 @@ function renderChart(chart) {
|
|
|
130
169
|
renderedStack,
|
|
131
170
|
renderedLines,
|
|
132
171
|
renderedPoints,
|
|
172
|
+
renderedDataAxisesBottom,
|
|
173
|
+
renderedDataAxisesTop,
|
|
174
|
+
renderedDataAxisesLeft,
|
|
175
|
+
renderedDataAxisesRight,
|
|
133
176
|
];
|
|
134
177
|
const topLeft = AI.createPoint(0, 0);
|
|
135
178
|
const size = AI.createSize(width, height);
|
|
@@ -140,118 +183,198 @@ function generateBackground(xMin, xMax, yMin, yMax, chart) {
|
|
|
140
183
|
return AI.createRectangle(AI.createPoint(xMin, yMax), AI.createPoint(xMax, yMin), AI.transparent, 0, chart.backgroundColor);
|
|
141
184
|
}
|
|
142
185
|
exports.generateBackground = generateBackground;
|
|
143
|
-
function
|
|
144
|
-
var _a, _b, _c
|
|
186
|
+
function generateXAxises(xAxis, xNumTicks, axises, xMin, xMax, yMin, yMax, chart) {
|
|
187
|
+
var _a, _b, _c;
|
|
145
188
|
const components = Array();
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
189
|
+
let lineY = xAxis === "bottom" ? yMin : yMax;
|
|
190
|
+
const dirFactor = xAxis == "bottom" ? 1 : -1;
|
|
191
|
+
for (const [ix, axis] of axises.entries()) {
|
|
192
|
+
const fullGrid = ix === 0 && xAxis === "bottom";
|
|
193
|
+
const xTicks = Axis.getTicks(xNumTicks, axis);
|
|
194
|
+
if (chart.xGrid) {
|
|
195
|
+
components.push(generateXAxisGridLines(xMin, xMax, lineY + dirFactor * 10, fullGrid ? yMax : lineY, xTicks, axis, chart.xGrid));
|
|
196
|
+
}
|
|
197
|
+
components.push(AI.createLine({ x: xMin, y: lineY }, { x: xMax, y: lineY }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateXAxisLabels(xMin, xMax, lineY + dirFactor * 12, xAxis === "bottom" ? "down" : "up", xTicks, axis, chart));
|
|
198
|
+
const axisLabelPosY = lineY + dirFactor * chart.axisWidth * axisLabelPosFactor;
|
|
199
|
+
switch (chart.labelLayout) {
|
|
200
|
+
case "original":
|
|
201
|
+
components.push(generateXAxisLabel(xMax + chart.padding.right, lineY + ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 10), "uniform", "down", axis, chart));
|
|
202
|
+
break;
|
|
203
|
+
case "end":
|
|
204
|
+
components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "uniform", axis, chart));
|
|
205
|
+
break;
|
|
206
|
+
case "center":
|
|
207
|
+
components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "uniform", axis, chart));
|
|
208
|
+
break;
|
|
209
|
+
default:
|
|
210
|
+
return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
|
|
211
|
+
}
|
|
212
|
+
lineY += dirFactor * chart.axisWidth;
|
|
167
213
|
}
|
|
168
|
-
return AI.createGroup("
|
|
214
|
+
return AI.createGroup(xAxis + "XAxis", components);
|
|
169
215
|
}
|
|
170
|
-
exports.
|
|
171
|
-
function
|
|
172
|
-
var _a, _b
|
|
216
|
+
exports.generateXAxises = generateXAxises;
|
|
217
|
+
function generateYAxises(yAxis, yNumTicks, axises, xMin, xMax, yMin, yMax, chart) {
|
|
218
|
+
var _a, _b;
|
|
173
219
|
const components = Array();
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
220
|
+
let lineX = yAxis === "left" ? xMin : xMax;
|
|
221
|
+
const dirFactor = yAxis == "left" ? -1 : 1;
|
|
222
|
+
for (const [ix, axis] of axises.entries()) {
|
|
223
|
+
const fullGrid = ix === 0 && yAxis === "left";
|
|
224
|
+
const yTicks = Axis.getTicks(yNumTicks, axis);
|
|
225
|
+
if (chart.yGrid) {
|
|
226
|
+
components.push(generateYAxisLines(lineX + dirFactor * 10, fullGrid ? xMax : lineX, yMin, yMax, yTicks, axis, chart.yGrid));
|
|
227
|
+
}
|
|
228
|
+
components.push(AI.createLine({ x: lineX, y: yMin }, { x: lineX, y: yMax }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateYAxisLabels(lineX + dirFactor * 12, yMin, yMax, yAxis, yTicks, axis, chart));
|
|
229
|
+
const axisLabelPosX = lineX + dirFactor * chart.axisWidth * axisLabelPosFactor;
|
|
230
|
+
const rotation = yAxis === "left" ? -90 : 90;
|
|
231
|
+
switch (chart.labelLayout) {
|
|
232
|
+
case "original":
|
|
233
|
+
components.push(generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, rotation, "uniform", "up", axis, chart));
|
|
234
|
+
break;
|
|
235
|
+
case "end":
|
|
236
|
+
components.push(generateYAxisLabel(axisLabelPosX, yMax, rotation, yAxis, "uniform", axis, chart));
|
|
237
|
+
break;
|
|
238
|
+
case "center":
|
|
239
|
+
components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, rotation, "uniform", "uniform", axis, chart));
|
|
240
|
+
break;
|
|
241
|
+
default:
|
|
242
|
+
return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
|
|
243
|
+
}
|
|
244
|
+
lineX += dirFactor * chart.axisWidth;
|
|
195
245
|
}
|
|
196
|
-
return AI.createGroup("
|
|
246
|
+
return AI.createGroup("YAxisLeft", components);
|
|
197
247
|
}
|
|
198
|
-
exports.
|
|
199
|
-
function
|
|
200
|
-
var _a, _b, _c
|
|
248
|
+
exports.generateYAxises = generateYAxises;
|
|
249
|
+
function generateDataAxisesX(xAxis, axises, numTicks, xMin, xMax, yMin, yMax, chart) {
|
|
250
|
+
var _a, _b, _c;
|
|
201
251
|
const components = Array();
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
const
|
|
206
|
-
const
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
252
|
+
let lineY = xAxis === "bottom"
|
|
253
|
+
? yMin + chart.xAxisesBottom.length * chart.axisWidth
|
|
254
|
+
: yMax - chart.xAxisesTop.length * chart.axisWidth;
|
|
255
|
+
const dirFactor = xAxis === "bottom" ? 1 : -1;
|
|
256
|
+
for (const axis of axises) {
|
|
257
|
+
const min = Math.min(...axis.points.map((p) => p.y));
|
|
258
|
+
const max = Math.max(...axis.points.map((p) => p.y));
|
|
259
|
+
const linear = Axis.createLinearAxis(min, max, axis.label, axis.labelColor, axis.labelRotation, axis.tickLabelDisp, axis.thickness, axis.axisColor, axis.id);
|
|
260
|
+
const findX = (y) => {
|
|
261
|
+
var _a, _b;
|
|
262
|
+
for (let i = 0; i < axis.points.length; ++i) {
|
|
263
|
+
const p0 = i > 0 ? axis.points[i - 1] : undefined;
|
|
264
|
+
const p1 = axis.points[i];
|
|
265
|
+
if (!p1) {
|
|
266
|
+
continue;
|
|
267
|
+
}
|
|
268
|
+
if (p0 && p0.y <= y && p1.y >= y) {
|
|
269
|
+
const k = (p1.x - p0.x) / (p1.y - p0.y);
|
|
270
|
+
const x = p0.x + k * (y - p0.y);
|
|
271
|
+
return x;
|
|
272
|
+
}
|
|
273
|
+
if (!p0 && p1.y >= y) {
|
|
274
|
+
return p1.x;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
return (_b = (_a = axis.points[axis.points.length - 1]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
|
|
278
|
+
};
|
|
279
|
+
const yValues = Axis.getTicks(numTicks, linear).map((t) => t.value);
|
|
280
|
+
const lineY2 = lineY;
|
|
281
|
+
components.push(...yValues.flatMap((y) => {
|
|
282
|
+
var _a, _b, _c, _d;
|
|
283
|
+
const tickX = findX(y);
|
|
284
|
+
const x = Axis.transformValue(tickX, xMin, xMax, chart.xAxisesBottom[0]);
|
|
285
|
+
const start = AI.createPoint(x, lineY2);
|
|
286
|
+
const end = AI.createPoint(x, lineY2 + dirFactor * 10);
|
|
287
|
+
const textPos = AI.createPoint(x, lineY2 + dirFactor * 12);
|
|
288
|
+
return [
|
|
289
|
+
AI.createLine(start, end, chart.xGrid.color, chart.xGrid.thickness),
|
|
290
|
+
AI.createText(textPos, formatNumber(y), chart.font, (_a = axis.tickFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", (_c = axis.labelRotation) !== null && _c !== void 0 ? _c : 0, "center", "uniform", xAxis === "bottom" ? "down" : "up", 0, (_d = axis.labelColor) !== null && _d !== void 0 ? _d : AI.black, false),
|
|
291
|
+
];
|
|
292
|
+
}));
|
|
293
|
+
components.push(AI.createLine({ x: xMin, y: lineY }, { x: xMax, y: lineY }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1));
|
|
294
|
+
const axisLabelPosY = lineY + dirFactor * chart.axisWidth * axisLabelPosFactor;
|
|
295
|
+
switch (chart.labelLayout) {
|
|
296
|
+
case "original":
|
|
297
|
+
components.push(generateXAxisLabel(xMax + chart.padding.right, yMin + ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 10), "uniform", "up", linear, chart));
|
|
298
|
+
break;
|
|
299
|
+
case "end":
|
|
300
|
+
components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "uniform", linear, chart));
|
|
301
|
+
break;
|
|
302
|
+
case "center":
|
|
303
|
+
components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "uniform", linear, chart));
|
|
304
|
+
break;
|
|
305
|
+
default:
|
|
306
|
+
return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
|
|
307
|
+
}
|
|
308
|
+
lineY += dirFactor * chart.axisWidth;
|
|
223
309
|
}
|
|
224
|
-
return AI.createGroup("
|
|
310
|
+
return AI.createGroup(xAxis + "XDataAxis", components);
|
|
225
311
|
}
|
|
226
|
-
exports.
|
|
227
|
-
function
|
|
228
|
-
var _a, _b, _c
|
|
312
|
+
exports.generateDataAxisesX = generateDataAxisesX;
|
|
313
|
+
function generateDataAxisesY(yAxis, axises, numTicks, xMin, xMax, yMin, yMax, chart) {
|
|
314
|
+
var _a, _b, _c;
|
|
229
315
|
const components = Array();
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
const
|
|
234
|
-
const
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
316
|
+
let lineX = yAxis === "left"
|
|
317
|
+
? xMin - chart.yAxisesLeft.length * chart.axisWidth
|
|
318
|
+
: xMax + chart.yAxisesRight.length * chart.axisWidth;
|
|
319
|
+
const dirFactor = yAxis === "left" ? -1 : 1;
|
|
320
|
+
for (const axis of axises) {
|
|
321
|
+
const min = Math.min(...axis.points.map((p) => p.y));
|
|
322
|
+
const max = Math.max(...axis.points.map((p) => p.y));
|
|
323
|
+
const linear = Axis.createLinearAxis(min, max, axis.label, axis.labelColor, axis.labelRotation, axis.tickLabelDisp, axis.thickness, axis.axisColor, axis.id);
|
|
324
|
+
const findX = (y) => {
|
|
325
|
+
var _a, _b;
|
|
326
|
+
for (let i = 0; i < axis.points.length; ++i) {
|
|
327
|
+
const p0 = i > 0 ? axis.points[i - 1] : undefined;
|
|
328
|
+
const p1 = axis.points[i];
|
|
329
|
+
if (!p1) {
|
|
330
|
+
continue;
|
|
331
|
+
}
|
|
332
|
+
if (p0 && p0.y <= y && p1.y >= y) {
|
|
333
|
+
const k = (p1.x - p0.x) / (p1.y - p0.y);
|
|
334
|
+
const x = p0.x + k * (y - p0.y);
|
|
335
|
+
return x;
|
|
336
|
+
}
|
|
337
|
+
if (!p0 && p1.y >= y) {
|
|
338
|
+
return p1.x;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
return (_b = (_a = axis.points[axis.points.length - 1]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
|
|
342
|
+
};
|
|
343
|
+
const yValues = Axis.getTicks(numTicks, linear).map((t) => t.value);
|
|
344
|
+
const lineX2 = lineX;
|
|
345
|
+
components.push(...yValues.flatMap((y) => {
|
|
346
|
+
var _a, _b, _c;
|
|
347
|
+
const tickY = findX(y);
|
|
348
|
+
const yPx = Axis.transformValue(tickY, yMin, yMax, chart.yAxisesLeft[0]);
|
|
349
|
+
const start = AI.createPoint(lineX2, yPx);
|
|
350
|
+
const end = AI.createPoint(lineX2 + dirFactor * 10, yPx);
|
|
351
|
+
const textPos = AI.createPoint(lineX2 + dirFactor * 12, yPx);
|
|
352
|
+
return [
|
|
353
|
+
AI.createLine(start, end, chart.xGrid.color, chart.xGrid.thickness),
|
|
354
|
+
AI.createText(textPos, formatNumber(y), chart.font, (_a = axis.tickFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", 0, "center", yAxis, "uniform", 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false),
|
|
355
|
+
];
|
|
356
|
+
}));
|
|
357
|
+
components.push(AI.createLine({ x: lineX, y: yMin }, { x: lineX, y: yMax }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1));
|
|
358
|
+
const rotation = yAxis === "left" ? -90 : 90;
|
|
359
|
+
const axisLabelPosX = lineX + dirFactor * chart.axisWidth * axisLabelPosFactor;
|
|
360
|
+
switch (chart.labelLayout) {
|
|
361
|
+
case "original":
|
|
362
|
+
components.push(generateYAxisLabel(xMax + chart.padding.right, yMin + ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 10), rotation, "uniform", "up", linear, chart));
|
|
363
|
+
break;
|
|
364
|
+
case "end":
|
|
365
|
+
components.push(generateYAxisLabel(axisLabelPosX, yMax, rotation, "left", "uniform", linear, chart));
|
|
366
|
+
break;
|
|
367
|
+
case "center":
|
|
368
|
+
components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, rotation, "uniform", "uniform", linear, chart));
|
|
369
|
+
break;
|
|
370
|
+
default:
|
|
371
|
+
return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
|
|
372
|
+
}
|
|
373
|
+
lineX += dirFactor * chart.axisWidth;
|
|
251
374
|
}
|
|
252
|
-
return AI.createGroup("
|
|
375
|
+
return AI.createGroup(yAxis + "YDataAxis", components);
|
|
253
376
|
}
|
|
254
|
-
exports.
|
|
377
|
+
exports.generateDataAxisesY = generateDataAxisesY;
|
|
255
378
|
function generateStack(xMin, xMax, yMin, yMax, chart) {
|
|
256
379
|
const pointsPos = chart.chartStack.points.map((stackPoint) => ({
|
|
257
380
|
x: stackPoint.x,
|
|
@@ -271,8 +394,8 @@ function generateUnsignedStack(xMin, xMax, yMin, yMax, chart) {
|
|
|
271
394
|
if (chart.chartStack.points.length < 2) {
|
|
272
395
|
return AI.createGroup("stack", []);
|
|
273
396
|
}
|
|
274
|
-
const xAxis = chart.chartStack.xAxis === "top" ? chart.
|
|
275
|
-
const yAxis = chart.chartStack.yAxis === "right" ? chart.
|
|
397
|
+
const xAxis = chart.chartStack.xAxis === "top" ? chart.xAxisesTop[0] : chart.xAxisesBottom[0];
|
|
398
|
+
const yAxis = chart.chartStack.yAxis === "right" ? chart.yAxisesRight[0] : chart.yAxisesLeft[0];
|
|
276
399
|
const xPoints = chart.chartStack.points.map((stackPoints) => {
|
|
277
400
|
let sumY = 0;
|
|
278
401
|
const points = stackPoints.ys.map((y) => {
|
|
@@ -309,8 +432,8 @@ function generateLines(xMin, xMax, yMin, yMax, chart) {
|
|
|
309
432
|
if (l.points.length < 2) {
|
|
310
433
|
return AI.createGroup(l.label, []);
|
|
311
434
|
}
|
|
312
|
-
const xAxis = l.xAxis === "top" ? chart.
|
|
313
|
-
const yAxis = l.yAxis === "right" ? chart.
|
|
435
|
+
const xAxis = l.xAxis === "top" ? chart.xAxisesTop[0] : chart.xAxisesBottom[0];
|
|
436
|
+
const yAxis = l.yAxis === "right" ? chart.yAxisesRight[0] : chart.yAxisesLeft[0];
|
|
314
437
|
const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
|
|
315
438
|
const segments = getLineSegmentsInsideChart(xMin, xMax, yMin, yMax, points);
|
|
316
439
|
const components = [];
|
|
@@ -392,8 +515,8 @@ function lineLine(a0, a1, b0, b1) {
|
|
|
392
515
|
function generatePoints(xMin, xMax, yMin, yMax, chart) {
|
|
393
516
|
const points = chart.chartPoints.map((p) => {
|
|
394
517
|
var _a, _b, _c;
|
|
395
|
-
const xAxis = p.xAxis === "top" ? chart.
|
|
396
|
-
const yAxis = p.yAxis === "right" ? chart.
|
|
518
|
+
const xAxis = p.xAxis === "top" ? chart.xAxisesTop[0] : chart.xAxisesBottom[0];
|
|
519
|
+
const yAxis = p.yAxis === "right" ? chart.yAxisesRight[0] : chart.yAxisesLeft[0];
|
|
397
520
|
const position = Axis.transformPoint(p.position, xMin, xMax, yMin, yMax, xAxis, yAxis);
|
|
398
521
|
const outlineColor = (_a = p.textOutlineColor) !== null && _a !== void 0 ? _a : chart.textOutlineColor;
|
|
399
522
|
const components = [
|
|
@@ -447,10 +570,23 @@ function generateXAxisGridLines(xMin, xMax, yMin, yMax, xTicks, xAxis, grid) {
|
|
|
447
570
|
}
|
|
448
571
|
exports.generateXAxisGridLines = generateXAxisGridLines;
|
|
449
572
|
function generateXAxisLabels(xMin, xMax, y, growVertical, ticks, axis, chart) {
|
|
573
|
+
var _a;
|
|
574
|
+
const rotation = (_a = axis.labelRotation) !== null && _a !== void 0 ? _a : 0;
|
|
575
|
+
const horizontalGrowth = (() => {
|
|
576
|
+
if (rotation === 0) {
|
|
577
|
+
return "uniform";
|
|
578
|
+
}
|
|
579
|
+
if (growVertical === "down") {
|
|
580
|
+
return rotation < 0 ? "left" : "right";
|
|
581
|
+
}
|
|
582
|
+
else {
|
|
583
|
+
return rotation < 0 ? "right" : "left";
|
|
584
|
+
}
|
|
585
|
+
})();
|
|
450
586
|
const xLabels = ticks.map((l) => {
|
|
451
|
-
var _a, _b, _c, _d
|
|
587
|
+
var _a, _b, _c, _d;
|
|
452
588
|
const position = AI.createPoint(Axis.transformValue(l.value, xMin, xMax, axis), y);
|
|
453
|
-
return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = axis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal",
|
|
589
|
+
return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = axis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", rotation, "center", horizontalGrowth, growVertical, 0, (_d = axis.labelColor) !== null && _d !== void 0 ? _d : AI.black, false);
|
|
454
590
|
});
|
|
455
591
|
return AI.createGroup("Labels", xLabels);
|
|
456
592
|
}
|
|
@@ -472,18 +608,31 @@ function generateYAxisLines(xMin, xMax, yMin, yMax, yTicks, yAxis, grid) {
|
|
|
472
608
|
}
|
|
473
609
|
exports.generateYAxisLines = generateYAxisLines;
|
|
474
610
|
function generateYAxisLabels(x, yMin, yMax, growHorizontal, yTicks, yAxis, chart) {
|
|
611
|
+
var _a;
|
|
612
|
+
const rotation = (_a = yAxis.labelRotation) !== null && _a !== void 0 ? _a : 0;
|
|
613
|
+
const growVertical = (() => {
|
|
614
|
+
if (rotation === 0) {
|
|
615
|
+
return "uniform";
|
|
616
|
+
}
|
|
617
|
+
if (growHorizontal === "left") {
|
|
618
|
+
return rotation < 0 ? "up" : "down";
|
|
619
|
+
}
|
|
620
|
+
else {
|
|
621
|
+
return rotation < 0 ? "down" : "up";
|
|
622
|
+
}
|
|
623
|
+
})();
|
|
475
624
|
const yLabels = yTicks.map((l) => {
|
|
476
|
-
var _a, _b, _c, _d
|
|
625
|
+
var _a, _b, _c, _d;
|
|
477
626
|
const position = AI.createPoint(x, Axis.transformValue(l.value, yMin, yMax, yAxis));
|
|
478
|
-
return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = yAxis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = yAxis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal",
|
|
627
|
+
return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = yAxis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = yAxis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", rotation, "center", growHorizontal, growVertical, 0, (_d = yAxis.labelColor) !== null && _d !== void 0 ? _d : AI.black, false);
|
|
479
628
|
});
|
|
480
629
|
return AI.createGroup("Labels", yLabels);
|
|
481
630
|
}
|
|
482
631
|
exports.generateYAxisLabels = generateYAxisLabels;
|
|
483
|
-
function generateYAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
|
|
632
|
+
function generateYAxisLabel(x, y, rotation, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
|
|
484
633
|
var _a, _b, _c;
|
|
485
634
|
const position = AI.createPoint(x, y);
|
|
486
|
-
return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal",
|
|
635
|
+
return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", rotation, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false, axis.id);
|
|
487
636
|
}
|
|
488
637
|
exports.generateYAxisLabel = generateYAxisLabel;
|
|
489
638
|
function formatNumber(n) {
|