chartwerk
/
bar-pod
4
0
Fork 0
Code Issues 3 Pull Requests 1 Projects Releases Wiki Activity

Compare commits

merge into: chartwerk:dep-core
Branches Tags
chartwerk:bar-chart-new-core
chartwerk:dep-core
chartwerk:main
chartwerk:react-bar-pod
...
pull from: chartwerk:main
Branches Tags
chartwerk:bar-chart-new-core
chartwerk:dep-core
chartwerk:main
chartwerk:react-bar-pod

8 Commits
dep-core ... main

Author SHA1 Message Date
rozetko 18a88e422c 0.8.1
2 months ago
rozetko 3b837a94a5 Merge pull request 'Fix bar width calculation' (#7) from fix-bar-width-calculation into main
2 months ago
rozetko 0302ed6c62 hotfix
2 months ago
rozetko 1b4a894460 revert
2 months ago
rozetko 71a0bc4e3b fix bar width calculation
2 months ago
rozetko 509adf0543 0.8.0
10 months ago
rozetko e2b41ac100 upd package json
10 months ago
rozetko 4a3ce4f26d revert to 0.6.6
10 months ago
15 changed files with 613 additions and 1073 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 61
      examples/demo.html
  2. 55
      examples/demo_annotation.html
  3. 57
      examples/demo_discrete.html
  4. 57
      examples/demo_formatters.html
  5. 56
      examples/demo_non_discrete.html
  6. 2
      package.json
  7. 374
      src/index.ts
  8. 69
      src/models/bar_annotation.ts
  9. 183
      src/models/bar_group.ts
  10. 99
      src/models/bar_options.ts
  11. 24
      src/models/bar_series.ts
  12. 46
      src/models/bar_state.ts
  13. 143
      src/models/data_processor.ts
  14. 102
      src/types.ts
  15. 352
      yarn.lock

61
examples/demo.html
Unescape View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] },
// { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
// { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
// { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
},
stacked: false,
matching: false,
maxBarWidth: 20,
minBarWidth: 4,
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
annotations: [
{ key: 'm-1', color: 'red' },
{ key: 'm-2', color: 'green' }
],
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
}
);
console.time('render');
pod.render();
console.timeEnd('render');
function getData() {
return [
[100, 15], [200, 20], [300, 10],
];
}
</script>
</body>
</html>
<style>
.overlay {
fill: black;
}
</style>

55
examples/demo_annotation.html
Unescape View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'], annotation: { enable: true, color: 'green'} },
{ target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'], annotation: { enable: true, color: 'black' } },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] },
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
},
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
type: {
['non-discrete']: {
enable: true,
barWidth: {
estimated: { value: 35, type: 'unit' },
max: 30,
min: 10,
}
}
}
}
);
console.time('render');
pod.render();
console.timeEnd('render');
</script>
</body>
</html>
<style>
.overlay {
fill: none;
}
</style>

57
examples/demo_discrete.html
Unescape View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [200, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] },
{ target: 'serie2', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] },
{ target: 'serie3', datapoints: [[100, -10, 5], [200, -5, -5], [300, -20, 15]], color: ['red', 'pink', 'blue'] },
{ target: 'serie4', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 },
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
},
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
// discrete type config
type: {
discrete: {
enable: true,
step: 100,
groupSize: {
width: { value: 60, type: 'percent', }
}
}
}
}
);
console.time('render');
pod.render();
console.timeEnd('render');
</script>
</body>
</html>
<style>
.overlay {
fill: none;
}
</style>

57
examples/demo_formatters.html
Unescape View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
// use formatters for color and opacity
const colorFormatter = (event) => (event.value > 50 ? 'red' : 'green');
const opacityFormatter = (event) => (event.key >= 200 ? 0.5 : 1);
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'serie1', datapoints: [[0, 50], [100, 70], [200, 40], [300, 90]], color: colorFormatter, opacity: opacityFormatter },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 },
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
},
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
type: {
discrete: {
enable: true,
step: 100,
groupSize: {
width: { value: 60, type: 'percent', }
}
}
}
}
);
console.time('render');
pod.render();
console.timeEnd('render');
</script>
</body>
</html>
<style>
.overlay {
fill: none;
}
</style>

56
examples/demo_non_discrete.html
Unescape View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] },
{ target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'] },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] },
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
},
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
// non_discrete type config
type: {
['non-discrete']: {
enable: true,
barWidth: {
estimated: { value: 35, type: 'unit' },
max: 30,
min: 10,
}
}
}
}
);
console.time('render');
pod.render();
console.timeEnd('render');
</script>
</body>
</html>
<style>
.overlay {
fill: none;
}
</style>

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "@chartwerk/bar-pod", "name": "@chartwerk/bar-pod",
"version": "0.7.2", "version": "0.8.1",
"description": "Chartwerk bar pod", "description": "Chartwerk bar pod",
"main": "dist/index.js", "main": "dist/index.js",
"files": [ "files": [

374
src/index.ts
Unescape View File

@ -2,26 +2,17 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, AxisFormat } from '@cha
import { BarConfig } from './models/bar_options'; import { BarConfig } from './models/bar_options';
import { BarSeries } from './models/bar_series'; import { BarSeries } from './models/bar_series';
import { BarAnnotation } from './models/bar_annotation';
import { DataProcessor, DataRow, DataItem } from './models/data_processor';
import { BarGroup } from './models/bar_group';
import { setBarScaleY, setBarScaleX } from './models/bar_state';
import {
BarSerie, BarOptions, DiscreteConfig, NonDiscreteConfig,
BarPodType, SizeType, CallbackEvent, Color, Opacity,
BarData, ColorFormatter, OpacityFormatter,
Datapoint, ValueX, ValueY,
} from './types';
import { BarSerie, BarOptions, RowValues } from './types';
import { findClosest } from './utils'; import { findClosest } from './utils';
import * as d3 from 'd3'; import * as d3 from 'd3';
import * as _ from 'lodash'; import * as _ from 'lodash';
export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> { export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
barYScale: null | d3.ScaleLinear<number, number> = null; barYScale: null | d3.ScaleLinear<number, number> = null;
dataProcessor: DataProcessor; _seriesDataForRendring = [];
series: BarSeries; series: BarSeries;
options: BarConfig; options: BarConfig;
@ -29,10 +20,6 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
super(el, _series, _options); super(el, _series, _options);
this.series = new BarSeries(_series); this.series = new BarSeries(_series);
this.options = new BarConfig(_options); this.options = new BarConfig(_options);
this.dataProcessor = new DataProcessor(this.series.visibleSeries, this.options);
setBarScaleY(this.state, this.dataProcessor.dataRows, this.options);
setBarScaleX(this.state, this.dataProcessor.dataRows, this.options);
} }
protected renderMetrics(): void { protected renderMetrics(): void {
@ -40,33 +27,188 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
this.dataProcessor.dataRows.forEach((dataRow: DataRow) => {
const barGroup = new BarGroup( this.setBarPodScales();
this.overlay, this.metricContainer, this.setSeriesDataForRendering();
dataRow, this.options, this.state, this.renderSerie(this._seriesDataForRendring);
{ width: this.width, height: this.height, zeroHorizon: this.state.yScale(0) }, }
this.dataProcessor.dataRows.length
get isMatchingDisabled(): boolean {
return this.options.barOptions.matching === false || this.seriesUniqKeys.length === 0;
}
setSeriesDataForRendering(): void {
if(this.isMatchingDisabled) {
this._seriesDataForRendring = this.getZippedDataForRender(this.series.visibleSeries);
} else {
const matchedSeries = this.seriesForMatching.map(
(series: BarSerie[], idx: number) => this.getZippedDataForRender(series)
); );
this.renderAnnotationForGroup(barGroup, dataRow); this._seriesDataForRendring = this.mergeMacthedSeriesAndSort(matchedSeries);
}); }
} }
renderAnnotationForGroup(barGroup: BarGroup, dataRow: DataRow): void { setBarPodScales(): void {
if(this.options.barType === BarPodType.DISCRETE) { // TODO: its a hack to avoid infinite scale function recalling
// It should be fixed by implenting BarState
this.barYScale = this.getYScale();
}
renderSerie(data: any): void {
this.metricContainer.selectAll(`.rects-container`)
.data(data)
.enter().append('g')
.attr('class', 'rects-container')
.each((d: RowValues, rowIndex: number, nodes: any) => {
const container = d3.select(nodes[rowIndex]);
container.selectAll('rect')
.data(d.values)
.enter().append('rect')
.style('fill', (val, idx) => this.getBarColor(d, val, idx, rowIndex))
.attr('opacity', () => this.getBarOpacity(d))
.attr('x', (val: number, idx: number) => {
return this.getBarPositionX(d.key, idx);
})
.attr('y', (val: number, idx: number) => {
return this.getBarPositionY(val, idx, d.values);
})
.attr('width', this.barWidth)
.attr('height', (val: number) => this.getBarHeight(val))
.on('contextmenu', this.contextMenu.bind(this))
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
// render bar annotations, its all hardcoded
if(_.isEmpty(this.options.barOptions.annotations)) {
return; return;
} }
const target = _.first(dataRow.items).target; // find all series for single matchedKey
const serie = this.series.getSerieByTarget(target); const series = _.filter(this.series.visibleSeries, serie => _.includes(d.serieTarget, serie.target));
if(!serie.annotation?.enable) { const matchedKeys = _.map(series, serie => serie.matchedKey); // here matchedKeys should be equal
const key = matchedKeys[0];
const lastRect = _.last(container.selectAll('rect')?.nodes());
const annotation = _.find(this.options.barOptions.annotations, a => a.key === key);
if(!lastRect || !key || !annotation) {
return; return;
} }
const annotationOptions = {
size: barGroup.getGroupWidth(), const rectSelection = d3.select(lastRect);
max: serie.annotation.size.max, // render triangle
min: serie.annotation.size.min, container.append('path')
color: serie.annotation.color, .attr('d', () => {
const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
const y = Math.ceil(_.toNumber(rectSelection.attr('y')));
const options = { max: this.options.barOptions.maxAnnotationSize, min: this.options.barOptions.minAnnotationSize };
return this.getTrianglePath(x, y, this.barWidth, options);
})
.attr('fill', annotation.color)
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
});
}
redirectEventToOverlay(): void {
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
}
getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
// (x, y) - top left corner of bar
const minTriangleSize = options?.min || 6;
const maxTriagleSize = options?.max || 10;
const yOffset = 4; // offset between triangle and bar
const centerX = x + length / 2;
const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
const topY = Math.max(y - correctedLength - yOffset, 4);
const topLeftCorner = {
x: centerX - correctedLength / 2,
y: topY,
};
const topRightCorner = {
x: centerX + correctedLength / 2,
y: topY,
}; };
new BarAnnotation(this.overlay, barGroup.getGroupContainer(), annotationOptions); const bottomMiddleCorner = {
x: centerX,
y: topY + correctedLength,
};
return `M ${topLeftCorner.x} ${topLeftCorner.y}
L ${topRightCorner.x} ${topRightCorner.y}
L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
}
getBarOpacity(rowValues: RowValues): number {
if(this.options.barOptions.opacityFormatter === undefined) {
return 1;
}
return this.options.barOptions.opacityFormatter(rowValues);
}
getBarColor(rowValues: RowValues, val: number, i: number, rowIndex: number): string {
if(_.isFunction(rowValues.colors[i])) {
return (rowValues.colors[i] as Function)({ rowData: rowValues, val, stackedIndex: i, rowIndex });
}
return (rowValues.colors[i] as string);
}
mergeMacthedSeriesAndSort(matchedSeries: any[]) {
// TODO: refactor
if(matchedSeries.length === 0) {
throw new Error('Cant mergeMacthedSeriesAndSort');
}
if(matchedSeries.length === 1) {
return matchedSeries[0];
}
let unionSeries = _.clone(matchedSeries[0]);
for(let i = 1; i < matchedSeries.length; i++){
unionSeries = [...unionSeries, ...matchedSeries[i]];
}
const sortedSeries = _.sortBy(unionSeries, ['key']);
return sortedSeries;
}
get seriesUniqKeys(): string[] {
if(!this.series.isSeriesAvailable) {
return [];
}
const keys = this.series.visibleSeries.map(serie => serie.matchedKey);
const uniqKeys = _.uniq(keys);
const filteredKeys = _.filter(uniqKeys, key => key !== undefined);
return filteredKeys;
}
get seriesForMatching(): BarSerie[][] {
if(this.seriesUniqKeys.length === 0) {
return [this.series.visibleSeries];
}
const seriesList = this.seriesUniqKeys.map(key => {
const seriesWithKey = _.filter(this.series.visibleSeries, serie => serie.matchedKey === key);
return seriesWithKey;
});
return seriesList;
}
getZippedDataForRender(series: BarSerie[]): RowValues[] {
if(series.length === 0) {
throw new Error('There is no visible series');
}
const keysColumn = _.map(series[0].datapoints, row => row[0]);
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
// @ts-ignore
const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null));
const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns);
const zippedValuesColumn = _.zip(...valuesColumns);
const colors = _.map(series, serie => serie.colorFormatter || serie.color);
const tagrets = _.map(series, serie => serie.target);
const zippedData = _.zip(keysColumn, zippedValuesColumn, zippedAdditionalValuesColumn, tagrets);
const data = _.map(zippedData, row => { return { key: row[0], values: row[1], additionalValues: row[2], colors, serieTarget: tagrets } });
return data.filter(v => v.key !== undefined);
} }
public renderSharedCrosshair(values: { x?: number, y?: number }): void { public renderSharedCrosshair(values: { x?: number, y?: number }): void {
@ -89,39 +231,28 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
this.crosshair.select('#crosshair-line-x') this.crosshair.select('#crosshair-line-x')
.attr('x1', eventX) .attr('x1', eventX)
.attr('x2', eventX); .attr('x2', eventX);
const dataRow = this.getDataRowFromMousePosition(eventX);
const series = this.getSeriesPointFromMousePosition(eventX);
this.options.callbackMouseMove({ this.options.callbackMouseMove({
position: { x: d3.event.pageX,
eventX: event[0], y: d3.event.pageY,
eventY: event[1], time: this.state.xScale.invert(eventX),
pageX: d3.event.pageX, series,
pageY: d3.event.pageY, chartX: eventX,
valueX: this.state.xScale.invert(event[0]), chartWidth: this.width
valueY: this.state.yScale.invert(event[1]),
},
data: dataRow,
}); });
} }
getDataRowFromMousePosition(eventX: number): DataRow | undefined { getSeriesPointFromMousePosition(eventX: number): any[] | undefined {
if(!this.series.isSeriesAvailable) { if(!this.series.isSeriesAvailable) {
return undefined; return undefined;
} }
const mousePositionKey = this.state.xScale.invert(eventX); const mousePoisitionKey = Math.ceil(this.state.xScale.invert(eventX));
const keys = _.map(this.dataProcessor.dataRows, (dataRow: DataRow) => dataRow.key); const keys = _.map(this._seriesDataForRendring, el => el.key);
let idx: number; const idx = findClosest(keys, mousePoisitionKey);
switch(this.options.barType) {
case BarPodType.DISCRETE: return this._seriesDataForRendring[idx];
idx = Math.floor(mousePositionKey);
break;
case BarPodType.NON_DISCRETE:
idx = findClosest(keys, mousePositionKey);
break;
default:
break;
}
return this.dataProcessor.dataRows[idx];
} }
onMouseOver(): void { onMouseOver(): void {
@ -133,6 +264,121 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
this.options.callbackMouseOut(); this.options.callbackMouseOut();
this.crosshair.style('display', 'none'); this.crosshair.style('display', 'none');
} }
contextMenu(): void {
// maybe it is not the best name, but i took it from d3.
d3.event.preventDefault(); // do not open browser's context menu.
const event = d3.mouse(this.chartContainer.node());
const eventX = event[0];
const series = this.getSeriesPointFromMousePosition(eventX);
this.options.callbackContextMenu({
pageX: d3.event.pageX,
pageY: d3.event.pageY,
xVal: this.state.xScale.invert(eventX),
series,
chartX: eventX
});
}
get barWidth(): number {
const xAxisStartValue = _.first(this.series.visibleSeries[0].datapoints)[0];
const xAxisEndValue = _.last(this.series.visibleSeries[0].datapoints)[0];
const timeInterval = (xAxisEndValue - xAxisStartValue) / this.series.visibleSeries[0].datapoints.length;
let width = this.state.xScale(timeInterval) / 2;
if(this.options.barOptions.barWidth !== undefined) {
// barWidth now has axis-x dimension
width = this.state.xScale(this.state.getMinValueX() + this.options.barOptions.barWidth);
}
let rectColumns = this.series.visibleSeries.length;
if(this.options.barOptions.stacked === true) {
rectColumns = 1;
}
return this.updateBarWidthWithBorders(width / rectColumns);
}
updateBarWidthWithBorders(width: number): number {
let barWidth = width;
if(this.options.barOptions.minBarWidth !== undefined) {
barWidth = Math.max(barWidth, this.options.barOptions.minBarWidth);
}
if(this.options.barOptions.maxBarWidth !== undefined) {
barWidth = Math.min(barWidth, this.options.barOptions.maxBarWidth);
}
return barWidth;
}
getBarHeight(value: number): number {
// TODO: Property 'sign' does not exist on type 'Math'
// @ts-ignore
const height = Math.sign(value) * (this.barYScale(0) - this.barYScale(value));
return height;
}
getBarPositionX(key: number, idx: number): number {
let xPosition: number = this.state.xScale(key);
if(this.options.barOptions.stacked === false) {
xPosition += idx * this.barWidth;
}
return xPosition;
}
getBarPositionY(val: number, idx: number, values: number[]): number {
let yPosition: number = this.barYScale(Math.max(val, 0));
if(this.options.barOptions.stacked === true) {
const previousBarsHeight = _.sum(
_.map(_.range(idx), i => this.getBarHeight(values[i]))
);
yPosition -= previousBarsHeight;
}
return yPosition;
}
getYScale(): d3.ScaleLinear<number, number> {
if(
this.state.getMinValueY() === undefined ||
this.state.getMaxValueY() === undefined
) {
return d3.scaleLinear()
.domain([1, 0])
.range([0, this.height]);
}
const yMaxValue = this.getYMaxValue();
return d3.scaleLinear()
.domain([yMaxValue, Math.min(this.state.getMinValueY(), 0)])
.range([0, this.height]);
}
getYMaxValue(): number | undefined {
if(!this.series.isSeriesAvailable) {
return undefined;
}
if(this.options.axis.y.range) {
return _.max(this.options.axis.y.range);
}
let maxValue: number;
if(this.options.barOptions.stacked === true) {
if(this.options.barOptions.matching === true && this.seriesUniqKeys.length > 0) {
const maxValues = this.seriesForMatching.map(series => {
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
return maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
});
return _.max(maxValues);
} else {
const valuesColumns = _.map(this.series.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
}
} else {
maxValue = _.max(
this.series.visibleSeries.map(
serie => _.maxBy<number[]>(serie.datapoints, dp => dp[1])[0]
)
);
}
return Math.max(maxValue, 0);
}
} }
// it is used with Vue.component, e.g.: Vue.component('chartwerk-bar-chart', VueChartwerkBarChartObject) // it is used with Vue.component, e.g.: Vue.component('chartwerk-bar-chart', VueChartwerkBarChartObject)
@ -158,10 +404,4 @@ export const VueChartwerkBarChartObject = {
} }
}; };
export { export { BarSerie, BarOptions, TimeFormat, AxisFormat };
BarSerie, BarOptions, TimeFormat, AxisFormat,
DiscreteConfig, NonDiscreteConfig,
BarPodType, SizeType, CallbackEvent, Color, Opacity,
BarData, ColorFormatter, OpacityFormatter,
Datapoint, ValueX, ValueY, DataItem, DataRow,
};

69
src/models/bar_annotation.ts
Unescape View File

@ -1,69 +0,0 @@
import * as d3 from 'd3';
import * as _ from 'lodash';
const DEFAULT_ANNOTATION_OFFSET_Y = 4; //offset between triangle and bar in px
const DEFAULT_ANNOTATION_COLOR = 'red';
export class BarAnnotation {
position: { x: number, y: number };
constructor(
protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
protected groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>, // group - bars as one item
protected annotationOptions: { size: number, max?: number, min?: number, offset?: number, color?: string },
) {
this.position = this.getGroupLastRectPosition();
this.renderAnnotation();
}
protected renderAnnotation(): void {
this.groupContainer.append('path')
.attr('d', () => this.getTrianglePath())
.attr('fill', this.annotationOptions.color || DEFAULT_ANNOTATION_COLOR)
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
}
getGroupLastRectPosition(): { x: number, y: number } {
const lastRect = _.last(this.groupContainer.selectAll('rect')?.nodes());
const barSelection = d3.select(lastRect);
return {
x: Math.ceil(_.toNumber(barSelection.attr('x'))),
y: Math.ceil(_.toNumber(barSelection.attr('y'))),
}
}
protected getTrianglePath(): string {
// (x, y) - top left corner of bar
const minTriangleSize = this.annotationOptions?.min;
const maxTriagleSize = this.annotationOptions?.max;
const yOffset = this.annotationOptions?.offset || DEFAULT_ANNOTATION_OFFSET_Y;
const centerX = this.position.x + this.annotationOptions.size / 2;
const correctedLength = _.clamp(this.annotationOptions.size, minTriangleSize, maxTriagleSize);
const topY = Math.max(this.position.y - correctedLength - yOffset, 4);
const topLeftCorner = {
x: centerX - correctedLength / 2,
y: topY,
};
const topRightCorner = {
x: centerX + correctedLength / 2,
y: topY,
};
const bottomMiddleCorner = {
x: centerX,
y: topY + correctedLength,
};
return `M ${topLeftCorner.x} ${topLeftCorner.y}
L ${topRightCorner.x} ${topRightCorner.y}
L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
}
redirectEventToOverlay(): void {
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
}
}

183
src/models/bar_group.ts
Unescape View File

@ -1,183 +0,0 @@
import { DataRow, DataItem } from './data_processor';
import { BarConfig } from './bar_options';
import { PodState } from '@chartwerk/core';
import { BarOptions, BarPodType, BarSerie, SizeType } from '../types';
import * as d3 from 'd3';
import * as _ from 'lodash';
export class BarGroup {
constructor(
protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
protected container: d3.Selection<SVGGElement, unknown, null, undefined>,
protected dataRow: DataRow,
protected options: BarConfig,
protected state: PodState<BarSerie, BarOptions>,
protected boxParams: { width: number, height: number, zeroHorizon: number },
protected allDataLength: number,
) {
this.setGroupWidth();
this.setBarWidth();
this.renderBarGroup();
}
protected _groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
protected _groupWidth: number;
protected _barWidth: number;
public getGroupContainer(): d3.Selection<SVGGElement, unknown, null, undefined> {
return this._groupContainer;
}
public getGroupWidth(): number {
return this._groupWidth;
}
public getBarWidth(): number {
return this._barWidth;
}
protected renderBarGroup(): void {
this._groupContainer = this.container.append('g').attr('class', `bar-group group-${this.dataRow.key}`);
_.forEach(this.dataRow.items, (data: DataItem, serieIdx: number) => {
this.renderStackedBars(data, serieIdx);
});
}
protected renderStackedBars(data: DataItem, serieIdx: number): void {
const barsHeightPositiveList = [];
const barsHeightNegativeList = [];
data.values.forEach((value: number, valueIdx: number) => {
const barHeight = this.getBarHeight(value);
const config = {
position: {
x: this.getBarPositionX(serieIdx),
y: this.getBarPositionY(value, barsHeightPositiveList, barsHeightNegativeList, barHeight),
},
width: this._barWidth,
height: barHeight,
color: data.colors[valueIdx],
opacity: data.opacity[valueIdx],
value,
};
if(value >= 0) {
barsHeightPositiveList.push(barHeight);
} else {
barsHeightNegativeList.push(barHeight);
}
this.renderBar(config);
});
}
protected getBarPositionX(idx: number): number {
return this.state.xScale(this.dataRow.key) + this._barWidth * idx;
}
protected getBarPositionY(
value: number, barsHeightPositiveList: number[], barsHeightNegativeList: number[], barHeight: number
): number {
if(value >= 0) {
const previousBarsHeight = _.sum(barsHeightPositiveList);
return this.boxParams.zeroHorizon - previousBarsHeight - barHeight;
}
const previousBarsHeight = _.sum(barsHeightNegativeList);
return this.boxParams.zeroHorizon + previousBarsHeight;
}
protected getBarHeight(value): number {
return Math.abs(this.boxParams.zeroHorizon - this.state.yScale(value));
}
protected setGroupWidth(): void {
switch(this.options.barType) {
case BarPodType.DISCRETE:
this.setDiscreteGroupWidth();
return;
case BarPodType.NON_DISCRETE:
this.setNonDiscreteGroupWidth();
return;
}
}
protected setDiscreteGroupWidth(): void {
const groupSizeConfig = this.options.dicreteConfig.groupSize.width;
let width;
if(groupSizeConfig.type === SizeType.PX) {
width = groupSizeConfig.value;
}
if(groupSizeConfig.type === SizeType.PERCENT) {
const factor = groupSizeConfig.value / 100;
width = (this.boxParams.width / this.allDataLength) * factor;
}
this._groupWidth = _.clamp(width, this.options.dicreteConfig.groupSize.min || width, this.options.dicreteConfig.groupSize.max || width);
}
protected setNonDiscreteGroupWidth(): void {
const widthConfig = this.options.nonDicreteConfig.barWidth;
if(widthConfig.estimated.value === undefined) {
const groupWidth = this.boxParams.width / (this.allDataLength * this.dataRow.items.length);
this._groupWidth = groupWidth * 0.5;
return;
}
let width;
if(widthConfig.estimated.type === SizeType.PX) {
width = widthConfig.estimated.value;
}
if(widthConfig.estimated.type === SizeType.UNIT) {
width = this.state.absXScale(widthConfig.estimated.value);
}
this._groupWidth = _.clamp(width, widthConfig.min || width, widthConfig.max || width);
}
protected setBarWidth(): void {
switch(this.options.barType) {
case BarPodType.DISCRETE:
this._barWidth = this._groupWidth / this.dataRow.items.length;
return;
case BarPodType.NON_DISCRETE:
this._barWidth = this._groupWidth;
return;
}
}
protected renderBar(config: any): void {
this._groupContainer.append('rect')
.attr('x', config.position.x)
.attr('y', config.position.y)
.attr('width', config.width)
.attr('height', config.height)
.style('fill', config.color)
.attr('opacity', config.opacity)
.on('contextmenu', this.contextMenu.bind(this))
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
}
contextMenu(): void {
d3.event.preventDefault(); // do not open browser's context menu.
const event = d3.mouse(this.container.node());
this.options.callbackContextMenu({
position: {
eventX: event[0],
eventY: event[1],
pageX: d3.event.pageX,
pageY: d3.event.pageY,
valueX: this.state.xScale.invert(event[0]),
valueY: this.state.yScale.invert(event[1]),
},
data: this.dataRow,
});
}
redirectEventToOverlay(): void {
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
}
}

99
src/models/bar_options.ts
Unescape View File

@ -1,66 +1,40 @@
import { CoreOptions } from '@chartwerk/core'; import { CoreOptions } from '@chartwerk/core';
import { BarOptions, BarPodType, DiscreteConfig, NonDiscreteConfig, SizeType } from '../types'; import { BarOptions, BarAdditionalOptions } from '../types';
import * as _ from 'lodash'; import * as _ from 'lodash';
const DEFAULT_MIN_BAR_WIDTH = 4; //px
const BAR_SERIE_DEFAULTS = { const BAR_SERIE_DEFAULTS = {
type: { renderBarLabels: false,
[BarPodType.DISCRETE]: { stacked: false,
enable: false, barWidth: undefined,
step: undefined, maxBarWidth: undefined,
innerSize: undefined, minBarWidth: undefined,
groupSize: { maxAnnotationSize: undefined,
width: { value: 50, type: (SizeType.PERCENT as SizeType.PERCENT) }, minAnnotationSize: undefined,
max: undefined, matching: false,
min: DEFAULT_MIN_BAR_WIDTH, opacityFormatter: undefined,
} annotations: [],
},
[BarPodType.NON_DISCRETE]: {
enable: false,
barWidth: {
estimated: { value: undefined, type: (SizeType.UNIT as SizeType.UNIT) },
max: undefined,
min: DEFAULT_MIN_BAR_WIDTH,
}
},
},
}; };
export class BarConfig extends CoreOptions<BarOptions> { export class BarConfig extends CoreOptions<BarOptions> {
constructor(options: BarOptions) { constructor(options: BarOptions) {
super(options, BAR_SERIE_DEFAULTS); super(options, BAR_SERIE_DEFAULTS);
this.validateOptions();
}
get barOptions(): any {
return {};
} }
get dicreteConfig(): DiscreteConfig { get barOptions(): BarAdditionalOptions {
if(!this._options.type[BarPodType.DISCRETE]?.enable) { return {
throw new Error(`Can't get discrete config for non_dicreste type`); renderBarLabels: this._options.renderBarLabels,
stacked: this._options.stacked,
barWidth: this._options.barWidth,
maxBarWidth: this._options.maxBarWidth,
minBarWidth: this._options.minBarWidth,
maxAnnotationSize: this._options.maxAnnotationSize,
minAnnotationSize: this._options.minAnnotationSize,
matching: this._options.matching,
opacityFormatter: this._options.opacityFormatter,
annotations: this._options.annotations,
} }
return this._options.type[BarPodType.DISCRETE];
}
get nonDicreteConfig(): NonDiscreteConfig {
if(!this._options.type[BarPodType.NON_DISCRETE]?.enable) {
throw new Error(`Can't get non_discrete config for dicreste type`);
}
return this._options.type[BarPodType.NON_DISCRETE];
}
get barType(): BarPodType {
if(this._options.type[BarPodType.DISCRETE]?.enable === true) {
return BarPodType.DISCRETE;
}
if(this._options.type[BarPodType.NON_DISCRETE]?.enable === true) {
return BarPodType.NON_DISCRETE;
}
throw new Error(`Unknown Ber Pod Type: ${this._options.type}`);
} }
// event callbacks // event callbacks
@ -73,31 +47,4 @@ export class BarConfig extends CoreOptions<BarOptions> {
get contextMenu(): (evt: any) => void { get contextMenu(): (evt: any) => void {
return this._options.eventsCallbacks.contextMenu; return this._options.eventsCallbacks.contextMenu;
} }
validateOptions(): void {
if(
this._options.type[BarPodType.DISCRETE]?.enable === true &&
this._options.type[BarPodType.NON_DISCRETE]?.enable === true
) {
throw new Error(`Bar Options is not valid: only one BarPodType should be enabled`);
}
if(
this._options.type[BarPodType.DISCRETE]?.enable === false &&
this._options.type[BarPodType.NON_DISCRETE]?.enable === false
) {
// @ts-ignore
this._options.type[BarPodType.DISCRETE]?.enable = true;
console.warn(`Bar Options: no type has been provided -> BarPodType.DISCRETE type will be used af default`);
}
}
validateDiscreteOptions(): void {
const groupType = this._options.type[BarPodType.DISCRETE].groupSize?.width?.type;
if(
groupType !== undefined &&
groupType !== SizeType.PERCENT && groupType !== SizeType.PX
) {
throw new Error(`Bar Options is not valid: groupSize.width.type should be "px" on "percent": ${groupType}`);
}
}
} }

24
src/models/bar_series.ts
Unescape View File

@ -1,23 +1,10 @@
import { CoreSeries } from '@chartwerk/core'; import { CoreSeries } from '@chartwerk/core';
import { BarSerie, SizeType } from '../types'; import { BarSerie } from '../types';
import * as _ from 'lodash';
const DEFAULT_MIN_ANNOTATION_SIZE = 6; //px
const DEFAULT_MAX_ANNOTATION_SIZE = 10; //px
const BAR_SERIE_DEFAULTS = { const BAR_SERIE_DEFAULTS = {
annotation: { matchedKey: undefined,
enable: false, colorFormatter: undefined
color: undefined,
size: {
esimated: { value: undefined, type: (SizeType.PERCENT as SizeType.PERCENT) },
max: DEFAULT_MAX_ANNOTATION_SIZE,
min: DEFAULT_MIN_ANNOTATION_SIZE,
}
},
color: undefined,
opacity: 1,
}; };
export class BarSeries extends CoreSeries<BarSerie> { export class BarSeries extends CoreSeries<BarSerie> {
@ -25,9 +12,4 @@ export class BarSeries extends CoreSeries<BarSerie> {
constructor(series: BarSerie[]) { constructor(series: BarSerie[]) {
super(series, BAR_SERIE_DEFAULTS); super(series, BAR_SERIE_DEFAULTS);
} }
// move to parent
public getSerieByTarget(target: string): BarSerie | undefined {
return _.find(this.visibleSeries, serie => serie.target === target);
}
} }

46
src/models/bar_state.ts
Unescape View File

@ -1,46 +0,0 @@
import { PodState } from '@chartwerk/core';
import { DataRow } from './data_processor';
import { BarConfig } from './bar_options';
import { BarOptions, BarSerie, BarPodType, DiscreteConfig } from '../types';
import * as _ from 'lodash';
// It is not a real bar state. Just rewrite some core params. like xScale/yScale
// TODO: import core scale and extend it, same to bar_series and bar_options
export function setBarScaleX(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarConfig): void {
switch(options.barType) {
case BarPodType.DISCRETE:
const config: DiscreteConfig = options.dicreteConfig;
let discreteStep = 0;
if(_.isNumber(config.step)) {
discreteStep = config.step;
} else {
if(!_.isEmpty(dataRows)) {
discreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length;
}
}
state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + discreteStep];
return;
case BarPodType.NON_DISCRETE:
if(!_.isEmpty(options.axis.x.range)) {
return;
}
let nonDiscreteStep = 0;
if(!_.isEmpty(dataRows)) {
nonDiscreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length;
}
state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + nonDiscreteStep];
return;
}
}
export function setBarScaleY(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarOptions): void {
if(!_.isEmpty(options.axis.y.range)) {
return;
}
const maxValue = _.max(_.map(dataRows, (dataRow: DataRow) => dataRow.maxSumm));
const minValue = _.min(_.map(dataRows, (dataRow: DataRow) => dataRow.minSubtraction));
state.yValueRange = [minValue, maxValue];
}

143
src/models/data_processor.ts
Unescape View File

@ -1,143 +0,0 @@
import {
Datapoint, Color, ValueX, Opacity,
BarPodType, BarSerie
} from '../types';
import { BarConfig } from './bar_options';
import * as _ from 'lodash';
export type DataRow = {
key: number; // x
items: DataItem[];
maxSumm: number;
minSubtraction: number;
};
export type DataItem = {
target: string; // serie target
values: number[]; // y list
colors: string[];
opacity: number[];
};
const DEFAULT_BAR_COLOR = 'green';
const DEFAULT_OPACITY = 1;
export class DataProcessor {
_formattedDataRows: DataRow[] = [];
constructor(protected visibleSeries: BarSerie[], protected options: BarConfig) {
this.validateData();
switch(this.options.barType) {
case BarPodType.DISCRETE:
this.setDataRowsForDiscreteType();
break;
case BarPodType.NON_DISCRETE:
this.setDataRowsForNonDiscreteType();
break;
default:
throw new Error(`Bar DataProcessor: Unknown BarPodType ${this.options.barType}`);
}
}
public get dataRows(): DataRow[] {
return this._formattedDataRows;
}
protected setDataRowsForDiscreteType(): void {
const zippedData = _.zip(..._.map(this.visibleSeries, serie => serie.datapoints));
this._formattedDataRows = _.map(zippedData, (dataRow: Datapoint[], rowIdx: number) => {
return {
key: _.first(_.first(dataRow)), // x
items: _.map(dataRow, (datapoint: Datapoint, pointIdx: number) => {
const serie = this.visibleSeries[pointIdx];
const values = _.tail(datapoint);
return {
target: serie.target,
values, // y list
colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target),
opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target),
}
}),
maxSumm: _.max(_.map(dataRow, (datapoint: Datapoint) => this.getMaxSumm(_.tail(datapoint)))), // max y axis scale
minSubtraction: _.min(_.map(dataRow, (datapoint: Datapoint) => this.getMinSubtraction(_.tail(datapoint)))), // min y axis scale
}
});
}
protected setDataRowsForNonDiscreteType(): void {
for(let serie of this.visibleSeries) {
const rows = _.map(serie.datapoints, (datapoint: Datapoint) => {
const values = _.tail(datapoint);
return {
key: datapoint[0], // x
items: [
{
target: serie.target,
values, // y list
colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target),
opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target),
}
],
maxSumm: this.getMaxSumm(values), // max y axis scale
minSubtraction: this.getMinSubtraction(values), // min y axis scale
}
});
this._formattedDataRows = _.concat(this._formattedDataRows, rows);
}
this._formattedDataRows = _.sortBy(this._formattedDataRows, 'key');
}
getColorsForEachValue(values: number[], color: Color, key: ValueX, target: string): string[] {
if(_.isString(color)) {
return _.map(values, value => color);
}
if(_.isArray(color)) {
return _.map(values, (value, i) => color[i] || DEFAULT_BAR_COLOR);
}
if(_.isFunction(color)) {
return _.map(values, (value, i) => (color as Function)({ value, barIndex: i, key, target }));
}
throw new Error(`Unknown type of serie color: ${target} ${color}`);
}
getOpacityForEachValue(values: number[], opacity: Opacity | undefined, key: ValueX, target: string): number[] {
if(opacity === undefined) {
return _.map(values, value => DEFAULT_OPACITY);
}
if(_.isNumber(opacity)) {
return _.map(values, value => opacity);
}
if(_.isArray(opacity)) {
return _.map(values, (value, i) => !_.isNil(opacity[i]) ? opacity[i] : DEFAULT_OPACITY);
}
if(_.isFunction(opacity)) {
return _.map(values, (value, i) => (opacity as Function)({ value, barIndex: i, key, target }));
}
throw new Error(`Unknown type of serie opacity: ${target} ${opacity}`);
}
getMaxSumm(values: number[]): number {
return values.reduce((prev, curr) => curr > 0 ? prev + curr : prev, 0);
}
getMinSubtraction(values: number[]): number {
return values.reduce((prev, curr) => curr < 0 ? prev + curr : prev, 0);
}
validateData(): void {
if(this.options.barType === BarPodType.NON_DISCRETE) {
return;
}
// TODO: move non-empty datapoints validation to core
if(_.isEmpty(this.visibleSeries)) {
return;
}
const xValuesList = _.map(_.first(this.visibleSeries).datapoints, dp => dp[0]);
_.forEach(this.visibleSeries, serie => {
const serieXList = _.map(serie.datapoints, dp => dp[0]);
if(!_.isEqual(xValuesList, serieXList)) {
throw new Error(`Bar DataProcessor: All series should have equal X values lists`);
}
});
}
}

102
src/types.ts
Unescape View File

@ -1,84 +1,34 @@
import { Serie, Options } from '@chartwerk/core'; import { Serie, Options } from '@chartwerk/core';
import { DataRow } from 'models/data_processor';
export type ValueX = (number | string); export type BarSerieParams = {
export type ValueY = number; matchedKey: string;
export type Datapoint = [ValueX, ...ValueY[]]; // [x, y, y, y, ..., y], multiple y values as stacked bars colorFormatter: (serie: BarSerie) => string;
export type BarData = { value: ValueY, key: ValueX, barIndex: number, target: string };
export type ColorFormatter = (data: BarData) => string;
export type OpacityFormatter = (data: BarData) => number;
export type Color = string | string[] | ColorFormatter;
export type Opacity = number | number[] | OpacityFormatter;
export type BarSerieAdditionalParams = {
datapoints: Datapoint[];
// TODO add absolute/stacked type for y values. datapoint can be [x: 0, y1: 10, y2: 20] (absolute) === [x: 0, y1: 10, y2: 10] (stacked)
annotation?: {
// only for non_discrete type for now
enable: boolean;
color?: string;
size?: {
esimated: { value: number, type?: SizeType.PERCENT | SizeType.PX };
max?: number; // type always SizeType.PX
min?: number; // type always SizeType.PX
}
};
color?: Color;
opacity?: Opacity;
}
export type BarSerie = Serie & BarSerieAdditionalParams;
export type CallbackEvent = {
position: {
eventX: number,
eventY: number,
pageX: number,
pageY: number,
valueX: number,
valueY: number,
},
data: DataRow,
} }
export type BarSerie = Serie & Partial<BarSerieParams>;
export type BarAdditionalOptions = { export type BarAdditionalOptions = {
type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both renderBarLabels?: boolean;
[BarPodType.DISCRETE]: DiscreteConfig; stacked?: boolean;
[BarPodType.NON_DISCRETE]: NonDiscreteConfig; barWidth?: number; // width in x axis unit
} maxBarWidth?: number; // in px
minBarWidth?: number; // in px
maxAnnotationSize?: number; // in px TODO: move to annotaions
minAnnotationSize?: number; // in px
matching?: boolean;
opacityFormatter?: (data: RowValues) => number;
annotations?: {
key: string, // matchedKey from series
// TODO: add enum with "triangle" option
color: string,
}[];
eventsCallbacks?: { eventsCallbacks?: {
contextMenu?: (data: CallbackEvent) => void; contextMenu?: (data: any) => void;
};
} }
export type BarOptions = Options & Partial<BarAdditionalOptions>;
export enum SizeType {
UNIT = 'unit', // in units of X or Y values
PX = 'px',
PERCENT = 'percent', // from 0 to 100
}
export enum BarPodType {
DISCRETE = 'discrete', // render bars as groups
NON_DISCRETE = 'non-discrete', // render bars as time chart
} }
export type BarOptions = Options & Partial<BarAdditionalOptions>;
export type DiscreteConfig = { export type RowValues = {
// union bars as one group, see examples/demo-group-by.html key: number,
enable: boolean; values: number[],
step?: number; // X axis interval between two bars, type always SizeType.UNIT additionalValues: (null | number)[], // values in datapoints third column
groupSize?: { colors: (string | ((data: any) => string))[],
width: { value: number, type?: SizeType.PERCENT | SizeType.PX, }, serieTarget: string[],
max?: number, // type always SizeType.PX
min?: number, // type always SizeType.PX
// TODO: margin between bars
};
};
export type NonDiscreteConfig = {
enable: boolean;
barWidth?: {
estimated?: { value: number, type?: SizeType.UNIT | SizeType.PX };
max?: number; // type always SizeType.PX
min?: number; // type always SizeType.PX
} }
};

352
yarn.lock
Unescape View File

@ -20,12 +20,12 @@ __metadata:
linkType: soft linkType: soft
"@chartwerk/core@npm:latest": "@chartwerk/core@npm:latest":
version: 0.6.14 version: 0.6.26
resolution: "@chartwerk/core@npm:0.6.14" resolution: "@chartwerk/core@npm:0.6.26"
dependencies: dependencies:
d3: ^5.16.0 d3: ^5.16.0
lodash: ^4.17.21 lodash: ^4.17.21
checksum: 34888b555d91a96d5a279f43dc4b33f345d055574855e1c90cb22913f7e42b13b6c9abbd0af07e6531b6f872cdf8e04660c22a2c14938189b67b9c494c6a0bfb checksum: d77ef83701dc13cf2b7fb36dc96448060b6301928bcc0730a7150930f83c51f295e176bcda4e1b8cb8f56d15fef5696edfe6f4e1033adbb5ef5d3487a02c3390
languageName: node languageName: node
linkType: hard linkType: hard
@ -47,10 +47,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@jridgewell/resolve-uri@npm:3.1.0": "@jridgewell/resolve-uri@npm:^3.1.0":
version: 3.1.0 version: 3.1.1
resolution: "@jridgewell/resolve-uri@npm:3.1.0" resolution: "@jridgewell/resolve-uri@npm:3.1.1"
checksum: b5ceaaf9a110fcb2780d1d8f8d4a0bfd216702f31c988d8042e5f8fbe353c55d9b0f55a1733afdc64806f8e79c485d2464680ac48a0d9fcadb9548ee6b81d267 checksum: f5b441fe7900eab4f9155b3b93f9800a916257f4e8563afbcd3b5a5337b55e52bd8ae6735453b1b745457d9f6cdb16d74cd6220bbdd98cf153239e13f6cbb653
languageName: node languageName: node
linkType: hard linkType: hard
@ -62,77 +62,72 @@ __metadata:
linkType: hard linkType: hard
"@jridgewell/source-map@npm:^0.3.3": "@jridgewell/source-map@npm:^0.3.3":
version: 0.3.3 version: 0.3.5
resolution: "@jridgewell/source-map@npm:0.3.3" resolution: "@jridgewell/source-map@npm:0.3.5"
dependencies: dependencies:
"@jridgewell/gen-mapping": ^0.3.0 "@jridgewell/gen-mapping": ^0.3.0
"@jridgewell/trace-mapping": ^0.3.9 "@jridgewell/trace-mapping": ^0.3.9
checksum: ae1302146339667da5cd6541260ecbef46ae06819a60f88da8f58b3e64682f787c09359933d050dea5d2173ea7fa40f40dd4d4e7a8d325c5892cccd99aaf8959 checksum: 1ad4dec0bdafbade57920a50acec6634f88a0eb735851e0dda906fa9894e7f0549c492678aad1a10f8e144bfe87f238307bf2a914a1bc85b7781d345417e9f6f
languageName: node languageName: node
linkType: hard linkType: hard
"@jridgewell/sourcemap-codec@npm:1.4.14": "@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
version: 1.4.14
resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
checksum: 61100637b6d173d3ba786a5dff019e1a74b1f394f323c1fee337ff390239f053b87266c7a948777f4b1ee68c01a8ad0ab61e5ff4abb5a012a0b091bec391ab97
languageName: node
linkType: hard
"@jridgewell/sourcemap-codec@npm:^1.4.10":
version: 1.4.15 version: 1.4.15
resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8 checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
languageName: node languageName: node
linkType: hard linkType: hard
"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9": "@jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.9":
version: 0.3.18 version: 0.3.22
resolution: "@jridgewell/trace-mapping@npm:0.3.18" resolution: "@jridgewell/trace-mapping@npm:0.3.22"
dependencies: dependencies:
"@jridgewell/resolve-uri": 3.1.0 "@jridgewell/resolve-uri": ^3.1.0
"@jridgewell/sourcemap-codec": 1.4.14 "@jridgewell/sourcemap-codec": ^1.4.14
checksum: 0572669f855260808c16fe8f78f5f1b4356463b11d3f2c7c0b5580c8ba1cbf4ae53efe9f627595830856e57dbac2325ac17eb0c3dd0ec42102e6f227cc289c02 checksum: ac7dd2cfe0b479aa1b81776d40d789243131cc792dc8b6b6a028c70fcd6171958ae1a71bf67b618ffe3c0c3feead9870c095ee46a5e30319410d92976b28f498
languageName: node languageName: node
linkType: hard linkType: hard
"@types/eslint-scope@npm:^3.7.3": "@types/eslint-scope@npm:^3.7.3":
version: 3.7.4 version: 3.7.7
resolution: "@types/eslint-scope@npm:3.7.4" resolution: "@types/eslint-scope@npm:3.7.7"
dependencies: dependencies:
"@types/eslint": "*" "@types/eslint": "*"
"@types/estree": "*" "@types/estree": "*"
checksum: ea6a9363e92f301cd3888194469f9ec9d0021fe0a397a97a6dd689e7545c75de0bd2153dfb13d3ab532853a278b6572c6f678ce846980669e41029d205653460 checksum: e2889a124aaab0b89af1bab5959847c5bec09809209255de0e63b9f54c629a94781daa04adb66bffcdd742f5e25a17614fb933965093c0eea64aacda4309380e
languageName: node languageName: node
linkType: hard linkType: hard
"@types/eslint@npm:*": "@types/eslint@npm:*":
version: 8.40.2 version: 8.56.2
resolution: "@types/eslint@npm:8.40.2" resolution: "@types/eslint@npm:8.56.2"
dependencies: dependencies:
"@types/estree": "*" "@types/estree": "*"
"@types/json-schema": "*" "@types/json-schema": "*"
checksum: a4780e45e677e3af21c44a900846996cb6d9ae8f71d51940942a047163ae93a05444392c005f491ed46aa169f3b25f8be125ab42c5d8bdb571154bf62a7c828a checksum: 38e054971596f5c0413f66a62dc26b10e0a21ac46ceacb06fbf8cfb838d20820787209b17218b3916e4c23d990ff77cfdb482d655cac0e0d2b837d430fcc5db8
languageName: node languageName: node
linkType: hard linkType: hard
"@types/estree@npm:*, @types/estree@npm:^1.0.0": "@types/estree@npm:*, @types/estree@npm:^1.0.5":
version: 1.0.1 version: 1.0.5
resolution: "@types/estree@npm:1.0.1" resolution: "@types/estree@npm:1.0.5"
checksum: e9aa175eacb797216fafce4d41e8202c7a75555bc55232dee0f9903d7171f8f19f0ae7d5191bb1a88cb90e65468be508c0df850a9fb81b4433b293a5a749899d checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a
languageName: node languageName: node
linkType: hard linkType: hard
"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8": "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8":
version: 7.0.12 version: 7.0.15
resolution: "@types/json-schema@npm:7.0.12" resolution: "@types/json-schema@npm:7.0.15"
checksum: 00239e97234eeb5ceefb0c1875d98ade6e922bfec39dd365ec6bd360b5c2f825e612ac4f6e5f1d13601b8b30f378f15e6faa805a3a732f4a1bbe61915163d293 checksum: 97ed0cb44d4070aecea772b7b2e2ed971e10c81ec87dd4ecc160322ffa55ff330dace1793489540e3e318d90942064bb697cc0f8989391797792d919737b3b98
languageName: node languageName: node
linkType: hard linkType: hard
"@types/node@npm:*": "@types/node@npm:*":
version: 20.3.1 version: 20.11.17
resolution: "@types/node@npm:20.3.1" resolution: "@types/node@npm:20.11.17"
checksum: 63a393ab6d947be17320817b35d7277ef03728e231558166ed07ee30b09fd7c08861be4d746f10fdc63ca7912e8cd023939d4eab887ff6580ff704ff24ed810c dependencies:
undici-types: ~5.26.4
checksum: 59c0dde187120adc97da30063c86511664b24b50fe777abfe1f557c217d0a0b84a68aaab5ef8ac44f5c2986b3f9cd605a15fa6e4f31195e594da96bbe9617c20
languageName: node languageName: node
linkType: hard linkType: hard
@ -344,11 +339,11 @@ __metadata:
linkType: hard linkType: hard
"acorn@npm:^8.7.1, acorn@npm:^8.8.2": "acorn@npm:^8.7.1, acorn@npm:^8.8.2":
version: 8.8.2 version: 8.11.3
resolution: "acorn@npm:8.8.2" resolution: "acorn@npm:8.11.3"
bin: bin:
acorn: bin/acorn acorn: bin/acorn
checksum: f790b99a1bf63ef160c967e23c46feea7787e531292bb827126334612c234ed489a0dc2c7ba33156416f0ffa8d25bf2b0fdb7f35c2ba60eb3e960572bece4001 checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
languageName: node languageName: node
linkType: hard linkType: hard
@ -391,17 +386,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"browserslist@npm:^4.14.5": "browserslist@npm:^4.21.10":
version: 4.21.9 version: 4.22.3
resolution: "browserslist@npm:4.21.9" resolution: "browserslist@npm:4.22.3"
dependencies: dependencies:
caniuse-lite: ^1.0.30001503 caniuse-lite: ^1.0.30001580
electron-to-chromium: ^1.4.431 electron-to-chromium: ^1.4.648
node-releases: ^2.0.12 node-releases: ^2.0.14
update-browserslist-db: ^1.0.11 update-browserslist-db: ^1.0.13
bin: bin:
browserslist: cli.js browserslist: cli.js
checksum: 80d3820584e211484ad1b1a5cfdeca1dd00442f47be87e117e1dda34b628c87e18b81ae7986fa5977b3e6a03154f6d13cd763baa6b8bf5dd9dd19f4926603698 checksum: e62b17348e92143fe58181b02a6a97c4a98bd812d1dc9274673a54f73eec53dbed1c855ebf73e318ee00ee039f23c9a6d0e7629d24f3baef08c7a5b469742d57
languageName: node languageName: node
linkType: hard linkType: hard
@ -412,10 +407,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"caniuse-lite@npm:^1.0.30001503": "caniuse-lite@npm:^1.0.30001580":
version: 1.0.30001503 version: 1.0.30001585
resolution: "caniuse-lite@npm:1.0.30001503" resolution: "caniuse-lite@npm:1.0.30001585"
checksum: cd5f0af37655ff71ec4ab3c49124d75e0b8b68de625d07ea80e9a82329e616b5203d5dad6865192653be9da50081c06878f081ab069dac0be35adf29aa1599cd checksum: c5994f0b5de857349ae0c157a3c61883e800ed154bbeab339aecf01a0a0fd24f67d23ebb48bc995c4c9cde2a281a51b682d1b14bbf2f832f6b2261119f450af4
languageName: node languageName: node
linkType: hard linkType: hard
@ -496,20 +491,26 @@ __metadata:
linkType: hard linkType: hard
"css-loader@npm:^6.8.1": "css-loader@npm:^6.8.1":
version: 6.8.1 version: 6.10.0
resolution: "css-loader@npm:6.8.1" resolution: "css-loader@npm:6.10.0"
dependencies: dependencies:
icss-utils: ^5.1.0 icss-utils: ^5.1.0
postcss: ^8.4.21 postcss: ^8.4.33
postcss-modules-extract-imports: ^3.0.0 postcss-modules-extract-imports: ^3.0.0
postcss-modules-local-by-default: ^4.0.3 postcss-modules-local-by-default: ^4.0.4
postcss-modules-scope: ^3.0.0 postcss-modules-scope: ^3.1.1
postcss-modules-values: ^4.0.0 postcss-modules-values: ^4.0.0
postcss-value-parser: ^4.2.0 postcss-value-parser: ^4.2.0
semver: ^7.3.8 semver: ^7.5.4
peerDependencies: peerDependencies:
"@rspack/core": 0.x || 1.x
webpack: ^5.0.0 webpack: ^5.0.0
checksum: 7c1784247bdbe76dc5c55fb1ac84f1d4177a74c47259942c9cfdb7a8e6baef11967a0bc85ac285f26bd26d5059decb848af8154a03fdb4f4894f41212f45eef3 peerDependenciesMeta:
"@rspack/core":
optional: true
webpack:
optional: true
checksum: ee3d62b5f7e4eb24281a22506431e920d07a45bd6ea627731ce583f3c6a846ab8b8b703bace599b9b35256b9e762f9f326d969abb72b69c7e6055eacf39074fd
languageName: node languageName: node
linkType: hard linkType: hard
@ -844,10 +845,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"electron-to-chromium@npm:^1.4.431": "electron-to-chromium@npm:^1.4.648":
version: 1.4.431 version: 1.4.664
resolution: "electron-to-chromium@npm:1.4.431" resolution: "electron-to-chromium@npm:1.4.664"
checksum: 51b76599b1e8141ced50339e873fe961aa56369cd622fb8a26964c084722204866fadbde94219a432398dab1317a5afd79843ba97cdcd5819dfc98be0e47c0a1 checksum: ffb3f0f797f0fe47dcf55f9e4a7dd409df40a0c9e11ced38d952f171ab79188a632fcccce101d876d171bbeb34c92754e4507d83b636c039e89b7acdb7646af7
languageName: node languageName: node
linkType: hard linkType: hard
@ -862,25 +863,25 @@ __metadata:
linkType: hard linkType: hard
"envinfo@npm:^7.7.3": "envinfo@npm:^7.7.3":
version: 7.8.1 version: 7.11.1
resolution: "envinfo@npm:7.8.1" resolution: "envinfo@npm:7.11.1"
bin: bin:
envinfo: dist/cli.js envinfo: dist/cli.js
checksum: de736c98d6311c78523628ff127af138451b162e57af5293c1b984ca821d0aeb9c849537d2fde0434011bed33f6bca5310ca2aab8a51a3f28fc719e89045d648 checksum: f3d38ab6bc62388466e86e2f5665f90f238ca349c81bb36b311d908cb5ca96650569b43b308c9dcb6725a222693f6c43a704794e74a68fb445ec5575a90ca05e
languageName: node languageName: node
linkType: hard linkType: hard
"es-module-lexer@npm:^1.2.1": "es-module-lexer@npm:^1.2.1":
version: 1.3.0 version: 1.4.1
resolution: "es-module-lexer@npm:1.3.0" resolution: "es-module-lexer@npm:1.4.1"
checksum: 48fd9f504a9d2a894126f75c8b7ccc6273a289983e9b67255f165bfd9ae765d50100218251e94e702ca567826905ea2f7b3b4a0c4d74d3ce99cce3a2a606a238 checksum: a11b5a256d4e8e9c7d94c2fd87415ccd1591617b6edd847e064503f8eaece2d25e2e9078a02c5ce3ed5e83bb748f5b4820efbe78072c8beb07ac619c2edec35d
languageName: node languageName: node
linkType: hard linkType: hard
"escalade@npm:^3.1.1": "escalade@npm:^3.1.1":
version: 3.1.1 version: 3.1.2
resolution: "escalade@npm:3.1.1" resolution: "escalade@npm:3.1.2"
checksum: a3e2a99f07acb74b3ad4989c48ca0c3140f69f923e56d0cba0526240ee470b91010f9d39001f2a4a313841d237ede70a729e92125191ba5d21e74b106800b133 checksum: 1ec0977aa2772075493002bdbd549d595ff6e9393b1cb0d7d6fcaf78c750da0c158f180938365486f75cb69fba20294351caddfce1b46552a7b6c3cde52eaa02
languageName: node languageName: node
linkType: hard linkType: hard
@ -964,10 +965,19 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"function-bind@npm:^1.1.1": "flat@npm:^5.0.2":
version: 1.1.1 version: 5.0.2
resolution: "function-bind@npm:1.1.1" resolution: "flat@npm:5.0.2"
checksum: b32fbaebb3f8ec4969f033073b43f5c8befbb58f1a79e12f1d7490358150359ebd92f49e72ff0144f65f2c48ea2a605bff2d07965f548f6474fd8efd95bf361a bin:
flat: cli.js
checksum: 12a1536ac746db74881316a181499a78ef953632ddd28050b7a3a43c62ef5462e3357c8c29d76072bb635f147f7a9a1f0c02efef6b4be28f8db62ceb3d5c7f5d
languageName: node
linkType: hard
"function-bind@npm:^1.1.2":
version: 1.1.2
resolution: "function-bind@npm:1.1.2"
checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1
languageName: node languageName: node
linkType: hard linkType: hard
@ -999,12 +1009,12 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"has@npm:^1.0.3": "hasown@npm:^2.0.0":
version: 1.0.3 version: 2.0.0
resolution: "has@npm:1.0.3" resolution: "hasown@npm:2.0.0"
dependencies: dependencies:
function-bind: ^1.1.1 function-bind: ^1.1.2
checksum: b9ad53d53be4af90ce5d1c38331e712522417d017d5ef1ebd0507e07c2fbad8686fffb8e12ddecd4c39ca9b9b47431afbb975b8abf7f3c3b82c98e9aad052792 checksum: 6151c75ca12554565098641c98a40f4cc86b85b0fd5b6fe92360967e4605a4f9610f7757260b4e8098dd1c2ce7f4b095f2006fe72a570e3b6d2d28de0298c176
languageName: node languageName: node
linkType: hard linkType: hard
@ -1045,12 +1055,12 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"is-core-module@npm:^2.12.0": "is-core-module@npm:^2.13.0":
version: 2.12.1 version: 2.13.1
resolution: "is-core-module@npm:2.12.1" resolution: "is-core-module@npm:2.13.1"
dependencies: dependencies:
has: ^1.0.3 hasown: ^2.0.0
checksum: f04ea30533b5e62764e7b2e049d3157dc0abd95ef44275b32489ea2081176ac9746ffb1cdb107445cf1ff0e0dfcad522726ca27c27ece64dadf3795428b8e468 checksum: 256559ee8a9488af90e4bad16f5583c6d59e92f0742e9e8bb4331e758521ee86b810b93bae44f390766ffbc518a0488b18d9dab7da9a5ff997d499efc9403f7c
languageName: node languageName: node
linkType: hard linkType: hard
@ -1181,12 +1191,12 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"nanoid@npm:^3.3.6": "nanoid@npm:^3.3.7":
version: 3.3.6 version: 3.3.7
resolution: "nanoid@npm:3.3.6" resolution: "nanoid@npm:3.3.7"
bin: bin:
nanoid: bin/nanoid.cjs nanoid: bin/nanoid.cjs
checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3 checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
languageName: node languageName: node
linkType: hard linkType: hard
@ -1197,10 +1207,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"node-releases@npm:^2.0.12": "node-releases@npm:^2.0.14":
version: 2.0.12 version: 2.0.14
resolution: "node-releases@npm:2.0.12" resolution: "node-releases@npm:2.0.14"
checksum: b8c56db82c4642a0f443332b331a4396dae452a2ac5a65c8dbd93ef89ecb2fbb0da9d42ac5366d4764973febadca816cf7587dad492dce18d2a6b2af59cda260 checksum: 59443a2f77acac854c42d321bf1b43dea0aef55cd544c6a686e9816a697300458d4e82239e2d794ea05f7bbbc8a94500332e2d3ac3f11f52e4b16cbe638b3c41
languageName: node languageName: node
linkType: hard linkType: hard
@ -1282,27 +1292,27 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"postcss-modules-local-by-default@npm:^4.0.3": "postcss-modules-local-by-default@npm:^4.0.4":
version: 4.0.3 version: 4.0.4
resolution: "postcss-modules-local-by-default@npm:4.0.3" resolution: "postcss-modules-local-by-default@npm:4.0.4"
dependencies: dependencies:
icss-utils: ^5.0.0 icss-utils: ^5.0.0
postcss-selector-parser: ^6.0.2 postcss-selector-parser: ^6.0.2
postcss-value-parser: ^4.1.0 postcss-value-parser: ^4.1.0
peerDependencies: peerDependencies:
postcss: ^8.1.0 postcss: ^8.1.0
checksum: 2f8083687f3d6067885f8863dd32dbbb4f779cfcc7e52c17abede9311d84faf6d3ed8760e7c54c6380281732ae1f78e5e56a28baf3c271b33f450a11c9e30485 checksum: 578b955b0773147890caa88c30b10dfc849c5b1412a47ad51751890dba16fca9528c3ab00a19b186a8c2c150c2d08e2ce64d3d907800afee1f37c6d38252e365
languageName: node languageName: node
linkType: hard linkType: hard
"postcss-modules-scope@npm:^3.0.0": "postcss-modules-scope@npm:^3.1.1":
version: 3.0.0 version: 3.1.1
resolution: "postcss-modules-scope@npm:3.0.0" resolution: "postcss-modules-scope@npm:3.1.1"
dependencies: dependencies:
postcss-selector-parser: ^6.0.4 postcss-selector-parser: ^6.0.4
peerDependencies: peerDependencies:
postcss: ^8.1.0 postcss: ^8.1.0
checksum: 330b9398dbd44c992c92b0dc612c0626135e2cc840fee41841eb61247a6cfed95af2bd6f67ead9dd9d0bb41f5b0367129d93c6e434fa3e9c58ade391d9a5a138 checksum: 9e9d23abb0babc7fa243be65704d72a5a9ceb2bded4dbaef96a88210d468b03c8c3158c197f4e22300c851f08c6fdddd6ebe65f44e4c34448b45b8a2e063a16d
languageName: node languageName: node
linkType: hard linkType: hard
@ -1328,12 +1338,12 @@ __metadata:
linkType: hard linkType: hard
"postcss-selector-parser@npm:^6.0.4": "postcss-selector-parser@npm:^6.0.4":
version: 6.0.13 version: 6.0.15
resolution: "postcss-selector-parser@npm:6.0.13" resolution: "postcss-selector-parser@npm:6.0.15"
dependencies: dependencies:
cssesc: ^3.0.0 cssesc: ^3.0.0
util-deprecate: ^1.0.2 util-deprecate: ^1.0.2
checksum: f89163338a1ce3b8ece8e9055cd5a3165e79a15e1c408e18de5ad8f87796b61ec2d48a2902d179ae0c4b5de10fccd3a325a4e660596549b040bc5ad1b465f096 checksum: 57decb94152111004f15e27b9c61131eb50ee10a3288e7fcf424cebbb4aba82c2817517ae718f8b5d704ee9e02a638d4a2acff8f47685c295a33ecee4fd31055
languageName: node languageName: node
linkType: hard linkType: hard
@ -1344,14 +1354,14 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"postcss@npm:^8.4.21": "postcss@npm:^8.4.33":
version: 8.4.24 version: 8.4.35
resolution: "postcss@npm:8.4.24" resolution: "postcss@npm:8.4.35"
dependencies: dependencies:
nanoid: ^3.3.6 nanoid: ^3.3.7
picocolors: ^1.0.0 picocolors: ^1.0.0
source-map-js: ^1.0.2 source-map-js: ^1.0.2
checksum: 814e2126dacfea313588eda09cc99a9b4c26ec55c059188aa7a916d20d26d483483106dc5ff9e560731b59f45c5bb91b945dfadc670aed875cc90ddbbf4e787d checksum: cf3c3124d3912a507603f6d9a49b3783f741075e9aa73eb592a6dd9194f9edab9d20a8875d16d137d4f779fe7b6fbd1f5727e39bfd1c3003724980ee4995e1da
languageName: node languageName: node
linkType: hard linkType: hard
@ -1397,28 +1407,28 @@ __metadata:
linkType: hard linkType: hard
"resolve@npm:^1.20.0": "resolve@npm:^1.20.0":
version: 1.22.3 version: 1.22.8
resolution: "resolve@npm:1.22.3" resolution: "resolve@npm:1.22.8"
dependencies: dependencies:
is-core-module: ^2.12.0 is-core-module: ^2.13.0
path-parse: ^1.0.7 path-parse: ^1.0.7
supports-preserve-symlinks-flag: ^1.0.0 supports-preserve-symlinks-flag: ^1.0.0
bin: bin:
resolve: bin/resolve resolve: bin/resolve
checksum: fb834b81348428cb545ff1b828a72ea28feb5a97c026a1cf40aa1008352c72811ff4d4e71f2035273dc536dcfcae20c13604ba6283c612d70fa0b6e44519c374 checksum: f8a26958aa572c9b064562750b52131a37c29d072478ea32e129063e2da7f83e31f7f11e7087a18225a8561cfe8d2f0df9dbea7c9d331a897571c0a2527dbb4c
languageName: node languageName: node
linkType: hard linkType: hard
"resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>": "resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>":
version: 1.22.3 version: 1.22.8
resolution: "resolve@patch:resolve@npm%3A1.22.3#~builtin<compat/resolve>::version=1.22.3&hash=07638b" resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=07638b"
dependencies: dependencies:
is-core-module: ^2.12.0 is-core-module: ^2.13.0
path-parse: ^1.0.7 path-parse: ^1.0.7
supports-preserve-symlinks-flag: ^1.0.0 supports-preserve-symlinks-flag: ^1.0.0
bin: bin:
resolve: bin/resolve resolve: bin/resolve
checksum: ad59734723b596d0891321c951592ed9015a77ce84907f89c9d9307dd0c06e11a67906a3e628c4cae143d3e44898603478af0ddeb2bba3f229a9373efe342665 checksum: 5479b7d431cacd5185f8db64bfcb7286ae5e31eb299f4c4f404ad8aa6098b77599563ac4257cb2c37a42f59dfc06a1bec2bcf283bb448f319e37f0feb9a09847
languageName: node languageName: node
linkType: hard linkType: hard
@ -1454,23 +1464,23 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"semver@npm:^7.3.4, semver@npm:^7.3.8": "semver@npm:^7.3.4, semver@npm:^7.5.4":
version: 7.5.1 version: 7.6.0
resolution: "semver@npm:7.5.1" resolution: "semver@npm:7.6.0"
dependencies: dependencies:
lru-cache: ^6.0.0 lru-cache: ^6.0.0
bin: bin:
semver: bin/semver.js semver: bin/semver.js
checksum: d16dbedad53c65b086f79524b9ef766bf38670b2395bdad5c957f824dcc566b624988013564f4812bcace3f9d405355c3635e2007396a39d1bffc71cfec4a2fc checksum: 7427f05b70786c696640edc29fdd4bc33b2acf3bbe1740b955029044f80575fc664e1a512e4113c3af21e767154a94b4aa214bf6cd6e42a1f6dba5914e0b208c
languageName: node languageName: node
linkType: hard linkType: hard
"serialize-javascript@npm:^6.0.1": "serialize-javascript@npm:^6.0.1":
version: 6.0.1 version: 6.0.2
resolution: "serialize-javascript@npm:6.0.1" resolution: "serialize-javascript@npm:6.0.2"
dependencies: dependencies:
randombytes: ^2.1.0 randombytes: ^2.1.0
checksum: 3c4f4cb61d0893b988415bdb67243637333f3f574e9e9cc9a006a2ced0b390b0b3b44aef8d51c951272a9002ec50885eefdc0298891bc27eb2fe7510ea87dc4f checksum: c4839c6206c1d143c0f80763997a361310305751171dd95e4b57efee69b8f6edd8960a0b7fbfc45042aadff98b206d55428aee0dc276efe54f100899c7fa8ab7
languageName: node languageName: node
linkType: hard linkType: hard
@ -1523,12 +1533,19 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"source-map@npm:^0.7.4":
version: 0.7.4
resolution: "source-map@npm:0.7.4"
checksum: 01cc5a74b1f0e1d626a58d36ad6898ea820567e87f18dfc9d24a9843a351aaa2ec09b87422589906d6ff1deed29693e176194dc88bcae7c9a852dc74b311dbf5
languageName: node
linkType: hard
"style-loader@npm:^3.3.3": "style-loader@npm:^3.3.3":
version: 3.3.3 version: 3.3.4
resolution: "style-loader@npm:3.3.3" resolution: "style-loader@npm:3.3.4"
peerDependencies: peerDependencies:
webpack: ^5.0.0 webpack: ^5.0.0
checksum: f59c953f56f6a935bd6a1dfa409f1128fed2b66b48ce4a7a75b85862a7156e5e90ab163878962762f528ec4d510903d828da645e143fbffd26f055dc1c094078 checksum: caac3f2fe2c3c89e49b7a2a9329e1cfa515ecf5f36b9c4885f9b218019fda207a9029939b2c35821dec177a264a007e7c391ccdd3ff7401881ce6287b9c8f38b
languageName: node languageName: node
linkType: hard linkType: hard
@ -1564,15 +1581,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"terser-webpack-plugin@npm:^5.3.7": "terser-webpack-plugin@npm:^5.3.10":
version: 5.3.9 version: 5.3.10
resolution: "terser-webpack-plugin@npm:5.3.9" resolution: "terser-webpack-plugin@npm:5.3.10"
dependencies: dependencies:
"@jridgewell/trace-mapping": ^0.3.17 "@jridgewell/trace-mapping": ^0.3.20
jest-worker: ^27.4.5 jest-worker: ^27.4.5
schema-utils: ^3.1.1 schema-utils: ^3.1.1
serialize-javascript: ^6.0.1 serialize-javascript: ^6.0.1
terser: ^5.16.8 terser: ^5.26.0
peerDependencies: peerDependencies:
webpack: ^5.1.0 webpack: ^5.1.0
peerDependenciesMeta: peerDependenciesMeta:
@ -1582,13 +1599,13 @@ __metadata:
optional: true optional: true
uglify-js: uglify-js:
optional: true optional: true
checksum: 41705713d6f9cb83287936b21e27c658891c78c4392159f5148b5623f0e8c48559869779619b058382a4c9758e7820ea034695e57dc7c474b4962b79f553bc5f checksum: bd6e7596cf815f3353e2a53e79cbdec959a1b0276f5e5d4e63e9d7c3c5bb5306df567729da287d1c7b39d79093e56863c569c42c6c24cc34c76aa313bd2cbcea
languageName: node languageName: node
linkType: hard linkType: hard
"terser@npm:^5.16.8": "terser@npm:^5.26.0":
version: 5.18.0 version: 5.27.0
resolution: "terser@npm:5.18.0" resolution: "terser@npm:5.27.0"
dependencies: dependencies:
"@jridgewell/source-map": ^0.3.3 "@jridgewell/source-map": ^0.3.3
acorn: ^8.8.2 acorn: ^8.8.2
@ -1596,7 +1613,7 @@ __metadata:
source-map-support: ~0.5.20 source-map-support: ~0.5.20
bin: bin:
terser: bin/terser terser: bin/terser
checksum: d01eb9805a978b3338b68fd2d9e35c1cd4cad78ea093dc92c7b3c38965232f0af0f95e0c6d90920ecf600a74135c608aebae26302c036c01393a590e1918bb90 checksum: c165052cfea061e8512e9b9ba42a098c2ff6382886ae122b040fd5b6153443070cc2dcb4862269f1669c09c716763e856125a355ff984aa72be525d6fffd8729
languageName: node languageName: node
linkType: hard linkType: hard
@ -1610,43 +1627,51 @@ __metadata:
linkType: hard linkType: hard
"ts-loader@npm:^9.4.3": "ts-loader@npm:^9.4.3":
version: 9.4.3 version: 9.5.1
resolution: "ts-loader@npm:9.4.3" resolution: "ts-loader@npm:9.5.1"
dependencies: dependencies:
chalk: ^4.1.0 chalk: ^4.1.0
enhanced-resolve: ^5.0.0 enhanced-resolve: ^5.0.0
micromatch: ^4.0.0 micromatch: ^4.0.0
semver: ^7.3.4 semver: ^7.3.4
source-map: ^0.7.4
peerDependencies: peerDependencies:
typescript: "*" typescript: "*"
webpack: ^5.0.0 webpack: ^5.0.0
checksum: 139ed53bc60717d0ca231cdffbdef7566b9feda11c72fecc697983113f1266ccca2e1cdf191f841a43afa6b87d6afe57a0caf4feecf02f30845aa7ac6f2411a4 checksum: 7cf396e656d905388ea2a9b5e82f16d3c955fda8d3df2fbf219f4bee16ff50a3c995c44ae3e584634e9443f056cec70bb3151add3917ffb4588ecd7394bac0ec
languageName: node languageName: node
linkType: hard linkType: hard
"typescript@npm:^5.1.3": "typescript@npm:^5.1.3":
version: 5.1.3 version: 5.3.3
resolution: "typescript@npm:5.1.3" resolution: "typescript@npm:5.3.3"
bin: bin:
tsc: bin/tsc tsc: bin/tsc
tsserver: bin/tsserver tsserver: bin/tsserver
checksum: d9d51862d98efa46534f2800a1071a613751b1585dc78884807d0c179bcd93d6e9d4012a508e276742f5f33c480adefc52ffcafaf9e0e00ab641a14cde9a31c7 checksum: 2007ccb6e51bbbf6fde0a78099efe04dc1c3dfbdff04ca3b6a8bc717991862b39fd6126c0c3ebf2d2d98ac5e960bcaa873826bb2bb241f14277034148f41f6a2
languageName: node languageName: node
linkType: hard linkType: hard
"typescript@patch:typescript@^5.1.3#~builtin<compat/typescript>": "typescript@patch:typescript@^5.1.3#~builtin<compat/typescript>":
version: 5.1.3 version: 5.3.3
resolution: "typescript@patch:typescript@npm%3A5.1.3#~builtin<compat/typescript>::version=5.1.3&hash=7ad353" resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin<compat/typescript>::version=5.3.3&hash=7ad353"
bin: bin:
tsc: bin/tsc tsc: bin/tsc
tsserver: bin/tsserver tsserver: bin/tsserver
checksum: 32a25b2e128a4616f999d4ee502aabb1525d5647bc8955e6edf05d7fbc53af8aa98252e2f6ba80bcedfc0260c982b885f3c09cfac8bb65d2924f3133ad1e1e62 checksum: f61375590b3162599f0f0d5b8737877ac0a7bc52761dbb585d67e7b8753a3a4c42d9a554c4cc929f591ffcf3a2b0602f65ae3ce74714fd5652623a816862b610
languageName: node
linkType: hard
"undici-types@npm:~5.26.4":
version: 5.26.5
resolution: "undici-types@npm:5.26.5"
checksum: 3192ef6f3fd5df652f2dc1cd782b49d6ff14dc98e5dced492aa8a8c65425227da5da6aafe22523c67f035a272c599bb89cfe803c1db6311e44bed3042fc25487
languageName: node languageName: node
linkType: hard linkType: hard
"update-browserslist-db@npm:^1.0.11": "update-browserslist-db@npm:^1.0.13":
version: 1.0.11 version: 1.0.13
resolution: "update-browserslist-db@npm:1.0.11" resolution: "update-browserslist-db@npm:1.0.13"
dependencies: dependencies:
escalade: ^3.1.1 escalade: ^3.1.1
picocolors: ^1.0.0 picocolors: ^1.0.0
@ -1654,7 +1679,7 @@ __metadata:
browserslist: ">= 4.21.0" browserslist: ">= 4.21.0"
bin: bin:
update-browserslist-db: cli.js update-browserslist-db: cli.js
checksum: b98327518f9a345c7cad5437afae4d2ae7d865f9779554baf2a200fdf4bac4969076b679b1115434bd6557376bdd37ca7583d0f9b8f8e302d7d4cc1e91b5f231 checksum: 1e47d80182ab6e4ad35396ad8b61008ae2a1330221175d0abd37689658bdb61af9b705bfc41057fd16682474d79944fb2d86767c5ed5ae34b6276b9bed353322
languageName: node languageName: node
linkType: hard linkType: hard
@ -1717,12 +1742,13 @@ __metadata:
linkType: hard linkType: hard
"webpack-merge@npm:^5.7.3": "webpack-merge@npm:^5.7.3":
version: 5.9.0 version: 5.10.0
resolution: "webpack-merge@npm:5.9.0" resolution: "webpack-merge@npm:5.10.0"
dependencies: dependencies:
clone-deep: ^4.0.1 clone-deep: ^4.0.1
flat: ^5.0.2
wildcard: ^2.0.0 wildcard: ^2.0.0
checksum: 64fe2c23aacc5f19684452a0e84ec02c46b990423aee6fcc5c18d7d471155bd14e9a6adb02bd3656eb3e0ac2532c8e97d69412ad14c97eeafe32fa6d10050872 checksum: 1fe8bf5309add7298e1ac72fb3f2090e1dfa80c48c7e79fa48aa60b5961332c7d0d61efa8851acb805e6b91a4584537a347bc106e05e9aec87fa4f7088c62f2f
languageName: node languageName: node
linkType: hard linkType: hard
@ -1734,17 +1760,17 @@ __metadata:
linkType: hard linkType: hard
"webpack@npm:^5.87.0": "webpack@npm:^5.87.0":
version: 5.87.0 version: 5.90.1
resolution: "webpack@npm:5.87.0" resolution: "webpack@npm:5.90.1"
dependencies: dependencies:
"@types/eslint-scope": ^3.7.3 "@types/eslint-scope": ^3.7.3
"@types/estree": ^1.0.0 "@types/estree": ^1.0.5
"@webassemblyjs/ast": ^1.11.5 "@webassemblyjs/ast": ^1.11.5
"@webassemblyjs/wasm-edit": ^1.11.5 "@webassemblyjs/wasm-edit": ^1.11.5
"@webassemblyjs/wasm-parser": ^1.11.5 "@webassemblyjs/wasm-parser": ^1.11.5
acorn: ^8.7.1 acorn: ^8.7.1
acorn-import-assertions: ^1.9.0 acorn-import-assertions: ^1.9.0
browserslist: ^4.14.5 browserslist: ^4.21.10
chrome-trace-event: ^1.0.2 chrome-trace-event: ^1.0.2
enhanced-resolve: ^5.15.0 enhanced-resolve: ^5.15.0
es-module-lexer: ^1.2.1 es-module-lexer: ^1.2.1
@ -1758,7 +1784,7 @@ __metadata:
neo-async: ^2.6.2 neo-async: ^2.6.2
schema-utils: ^3.2.0 schema-utils: ^3.2.0
tapable: ^2.1.1 tapable: ^2.1.1
terser-webpack-plugin: ^5.3.7 terser-webpack-plugin: ^5.3.10
watchpack: ^2.4.0 watchpack: ^2.4.0
webpack-sources: ^3.2.3 webpack-sources: ^3.2.3
peerDependenciesMeta: peerDependenciesMeta:
@ -1766,7 +1792,7 @@ __metadata:
optional: true optional: true
bin: bin:
webpack: bin/webpack.js webpack: bin/webpack.js
checksum: b7d0e390f9d30627e303d54b17cb87b62f49ecffe2d35481f830679904993bae208e23748ffe0e6091b6dd4810562b2f2e88bb0f23b96515d74fb1e3c2898210 checksum: a7be844d5720a0c6282fec012e6fa34b1137dff953c5d48bf2ef066a6c27c1dbc92a9b9effc05ee61c9fe269499266db9782073f2d82a589d3c5c966ffc56584
languageName: node languageName: node
linkType: hard linkType: hard

Write Preview
Loading…
Cancel
Save