Missing rangeBand method (#867)

allegro · Mar 7, 2022 · 665bfa0 · 665bfa0
1 parent 1e8ff03
commit 665bfa0
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 16 deletions.
diff --git a/src/client/components/bucket-marks/bucket-marks.tsx b/src/client/components/bucket-marks/bucket-marks.tsx
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import * as d3 from "d3";
 import { PlywoodValue } from "plywood";
 import * as React from "react";
 import { Stage } from "../../../common/models/stage/stage";
@@ -26,7 +27,7 @@ const TICK_HEIGHT = 5;
 export interface BucketMarksProps {
   stage: Stage;
   ticks: PlywoodValue[];
-  scale: any;
+  scale: d3.ScaleBand<PlywoodValue>;
 }
 
 export interface BucketMarksState {
@@ -36,21 +37,21 @@ export class BucketMarks extends React.Component<BucketMarksProps, BucketMarksSt
 
   render() {
     const { stage, ticks, scale } = this.props;
-    var stageWidth = stage.width;
+    const stageWidth = stage.width;
 
-    var lines: JSX.Element[] = [];
+    let lines: JSX.Element[] = [];
 
     function addLine(x: number, key: string) {
       if (stageWidth < x) return;
       lines.push(<line key={key} x1={x} y1={0} x2={x} y2={TICK_HEIGHT} />);
     }
 
-    for (var tick of ticks) {
-      var x = roundToHalfPx(scale(tick));
+    for (let tick of ticks) {
+      let x = roundToHalfPx(scale(tick));
       addLine(x, "_" + tick);
     }
     if (ticks.length) {
-      var x = roundToHalfPx(scale(ticks[ticks.length - 1]) + scale.rangeBand());
+      let x = roundToHalfPx(scale(ticks[ticks.length - 1]) + scale.bandwidth());
       addLine(x, "last");
     }
 

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
@@ -36,7 +36,7 @@ export const SingleBar: React.SFC<SingleBarProps> = props => {
   const [maxHeight] = yScale.range();
   const x = getX(datum);
   const xPos = xScale.calculate(x) + SIDE_PADDING;
-  const width = xScale.rangeBand() - (2 * SIDE_PADDING);
+  const width = xScale.bandwidth() - (2 * SIDE_PADDING);
   const y = series.selectValue(datum);
   const yPos = yScale(y);
   const height = maxHeight - yPos;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
@@ -36,7 +36,7 @@ export const SingleTimeShiftBar: React.SFC<SingleTimeShiftBar> = props => {
   const [maxHeight] = yScale.range();
   const x = getX(datum);
   const xStart = xScale.calculate(x);
-  const rangeBand = xScale.rangeBand();
+  const rangeBand = xScale.bandwidth();
   const fullWidth = rangeBand - 2 * SIDE_PADDING;
   const barWidth = fullWidth * 2 / 3;
 

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx
@@ -42,7 +42,7 @@ export const StackedBar: React.SFC<StackedBarProps> = props => {
 
   const x = getX(datum);
   const xPos = xScale.calculate(x) + SIDE_PADDING;
-  const width = xScale.rangeBand() - (2 * SIDE_PADDING);
+  const width = xScale.bandwidth() - (2 * SIDE_PADDING);
   const color = (d: Datum) => model.colors.get(String(d[ref]));
   return <React.Fragment>
     {datums.map(datum => {

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx
@@ -44,7 +44,7 @@ export const StackedTimeShiftBar: React.SFC<StackedTimeShiftBarProps> = props =>
   const x = getX(datum);
 
   const xStart = xScale.calculate(x);
-  const rangeBand = xScale.rangeBand();
+  const rangeBand = xScale.bandwidth();
   const fullWidth = rangeBand - 2 * SIDE_PADDING;
   const barWidth = fullWidth * 2 / 3;
   const color = (d: Datum) => model.colors.get(String(d[nominalReference]));

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx
@@ -50,7 +50,7 @@ export const HighlightModal: React.SFC<HighlightModalProps> = props => {
     series,
     xScale } = props;
   const xValue = getX(datum);
-  const x = xScale.calculate(xValue) + (xScale.rangeBand() / 2);
+  const x = xScale.calculate(xValue) + (xScale.bandwidth() / 2);
   const yValue = series.selectValue(datum);
   const y = yScale(yValue);
   return <BaseHighlightModal

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx
@@ -47,7 +47,7 @@ export const HighlightOverlay: React.SFC<HighlightOverlayProps> = props => {
   const { stage, yScale, series, xScale, showPrevious, interaction: { datum }, getX } = props;
   const xValue = getX(datum);
   const left = xScale.calculate(xValue);
-  const right = left + xScale.rangeBand();
+  const right = left + xScale.bandwidth();
   const yValue = getYValue(datum, series, showPrevious);
   const top = yScale(yValue) + stage.y - TOP_PADDING;
   return <Highlighter left={left} right={right} top={top} />;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx
@@ -49,7 +49,7 @@ export const HoverTooltip: React.SFC<HoverTooltipProps> = props => {
   } = props;
   const y = yScale(series.selectValue(datum));
   const xValue = getX(datum);
-  const x = xScale.calculate(xValue) + (xScale.rangeBand() / 2);
+  const x = xScale.calculate(xValue) + (xScale.bandwidth() / 2);
   return <SegmentBubble
     top={top + y}
     left={left + x}

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/utils/x-scale.mocha.ts b/src/client/visualizations/bar-chart/improved-bar-chart/utils/x-scale.mocha.ts
@@ -51,7 +51,7 @@ describe("x-scale", () => {
       });
 
       it("should return range band", () => {
-        expect(scale.rangeBand()).to.be.equal(30);
+        expect(scale.bandwidth()).to.be.equal(30);
       });
 
       it("should apply scale function", () => {

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/utils/x-scale.ts b/src/client/visualizations/bar-chart/improved-bar-chart/utils/x-scale.ts
@@ -23,7 +23,7 @@ export interface XScale {
   calculate(x: DomainValue): number;
   invert(x: number): DomainValue;
   domain(): XDomain;
-  rangeBand(): number;
+  bandwidth(): number;
 }
 
 export function createXScale(domain: XDomain, width: number): XScale {
@@ -41,7 +41,7 @@ export function createXScale(domain: XDomain, width: number): XScale {
     calculate: (value: DomainValue) => ordinalScale(formatDomainValue(value)),
     domain: () => domain,
     invert: (x: number) => quantizedScale(x),
-    rangeBand: () => ordinalScale.bandwidth()
+    bandwidth: () => ordinalScale.bandwidth()
   };
 }