Browse Source

fix bar width calculation

pull/7/head
rozetko 2 months ago
parent
commit
71a0bc4e3b
  1. 4
      examples/demo.html
  2. 6
      src/index.ts
  3. 14
      yarn.lock

4
examples/demo.html

@ -26,8 +26,6 @@
}, },
stacked: false, stacked: false,
matching: false, matching: false,
maxBarWidth: 20,
minBarWidth: 4,
zoomEvents: { zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, scroll: { zoom: { isActive: false }, pan: { isActive: false } },
}, },
@ -47,7 +45,7 @@
function getData() { function getData() {
return [ return [
[100, 15], [200, 20], [300, 10], [0, 15], [1, 20], [2, 10],
]; ];
} }
</script> </script>

6
src/index.ts

@ -282,9 +282,11 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
} }
get barWidth(): number { get barWidth(): number {
// TODO: here we use first value + timeInterval as bar width. It is not a good idea
const xAxisStartValue = _.first(this.series.visibleSeries[0].datapoints)[0]; const xAxisStartValue = _.first(this.series.visibleSeries[0].datapoints)[0];
let width = this.state.xScale(xAxisStartValue + this.timeInterval) / 2; const xAxisEndValue = _.last(this.series.visibleSeries[0].datapoints)[0];
const timeInterval = (xAxisEndValue - xAxisStartValue) / this.series.visibleSeries[0].datapoints.length;
console.log(xAxisStartValue, xAxisEndValue, timeInterval);
let width = this.state.xScale(timeInterval) / 2;
if(this.options.barOptions.barWidth !== undefined) { if(this.options.barOptions.barWidth !== undefined) {
// barWidth now has axis-x dimension // barWidth now has axis-x dimension
width = this.state.xScale(this.state.getMinValueX() + this.options.barOptions.barWidth); width = this.state.xScale(this.state.getMinValueX() + this.options.barOptions.barWidth);

14
yarn.lock

@ -20,12 +20,12 @@ __metadata:
linkType: soft linkType: soft
"@chartwerk/core@npm:latest": "@chartwerk/core@npm:latest":
version: 0.6.10 version: 0.6.26
resolution: "@chartwerk/core@npm:0.6.10" resolution: "@chartwerk/core@npm:0.6.26"
dependencies: dependencies:
d3: ^5.7.2 d3: ^5.16.0
lodash: ^4.14.149 lodash: ^4.17.21
checksum: 6a7f187b77878f20ba696a2bbd843bb57d8891efd69e578c946f56f501f679531efa42a33aa243b7fb5e52f6ca06a49a357fb37bcf99d8c32c1c46e4d27fcb2d checksum: d77ef83701dc13cf2b7fb36dc96448060b6301928bcc0730a7150930f83c51f295e176bcda4e1b8cb8f56d15fef5696edfe6f4e1033adbb5ef5d3487a02c3390
languageName: node languageName: node
linkType: hard linkType: hard
@ -806,7 +806,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"d3@npm:^5.7.2": "d3@npm:^5.16.0":
version: 5.16.0 version: 5.16.0
resolution: "d3@npm:5.16.0" resolution: "d3@npm:5.16.0"
dependencies: dependencies:
@ -1142,7 +1142,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"lodash@npm:^4.14.149": "lodash@npm:^4.17.21":
version: 4.17.21 version: 4.17.21
resolution: "lodash@npm:4.17.21" resolution: "lodash@npm:4.17.21"
checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7

Loading…
Cancel
Save