Bar - Linked Brushing

Live View

Loading...

Live Editor

const barData = [
  {
    name: "SEA",
    range: [
      new Date(2013, 1, 1),
      new Date(2019, 1, 1),
    ],
  },
  {
    name: "HKG",
    range: [
      new Date(2015, 1, 1),
      new Date(2015, 5, 1),
    ],
  },
  {
    name: "LHR",
    range: [
      new Date(2016, 5, 1),
      new Date(2019, 1, 1),
    ],
  },
  {
    name: "DEN",
    range: [
      new Date(2018, 8, 1),
      new Date(2019, 1, 1),
    ],
  },
];

const pointData = [
  {
    name: "SEA",
    date: new Date(2012, 9, 1),
  },
  {
    name: "HKG",
    date: new Date(2014, 3, 1),
  },
  {
    name: "LHR",
    date: new Date(2015, 6, 1),
  },
  {
    name: "DEN",
    date: new Date(2018, 3, 1),
  },
];

const containerStyle = {
  display: "flex",
  flexDirection: "row",
  flexWrap: "wrap",
  alignItems: "center",
  justifyContent: "center",
  paddingBottom: 50
};

const domain = {
  y: [
    new Date(2012, 1, 1),
    new Date(2019, 1, 1),
  ],
  x: [0.5, 4.5],
};

const sharedProps = {
  width: 800,
  domain,
};

class DraggablePoint extends React.Component {
  static defaultEvents = [
    {
      target: "data",
      eventHandlers: {
        onMouseOver: (
          evt,
          targetProps,
        ) => {
          return [
            {
              mutation: () =>
                Object.assign(
                  targetProps,
                  { active: true },
                ),
            },
          ];
        },
        onMouseDown: (
          evt,
          targetProps,
        ) => {
          return [
            {
              mutation: () =>
                Object.assign(
                  targetProps,
                  { dragging: true },
                ),
            },
          ];
        },
        onMouseMove: (
          evt,
          targetProps,
        ) => {
          const {
            onPointChange,
            datum,
            scale,
          } = targetProps;

          if (targetProps.dragging) {
            const { x } =
              Selection.getSVGEventCoordinates(
                evt,
              );
            const point =
              scale.y.invert(x);
            const name = datum.name;

            onPointChange({
              name,
              date: point,
            });

            return [
              {
                mutation: () =>
                  Object.assign(
                    targetProps,
                    { x },
                  ),
              },
            ];
          }
          return null;
        },
        onMouseUp: (
          evt,
          targetProps,
        ) => {
          return [
            {
              mutation: () =>
                Object.assign(
                  targetProps,
                  {
                    dragging: false,
                    active: false,
                  },
                ),
            },
          ];
        },
        onMouseLeave: (
          evt,
          targetProps,
        ) => {
          return [
            {
              mutation: () =>
                Object.assign(
                  targetProps,
                  {
                    dragging: false,
                    active: false,
                  },
                ),
            },
          ];
        },
      },
    },
  ];

  render() {
    return <Point {...this.props} />;
  }
}

function App() {
  const [zoomDomain, setZoomDomain] =
    React.useState({});
  const [bars, setBars] =
    React.useState(barData);
  const [points, setPoints] =
    React.useState(pointData);

  function handleZoom(domain) {
    setZoomDomain(domain);
  }

  function onDomainChange(
    domain,
    props,
  ) {
    const { name } = props;
    const newBars = bars.map((bar) =>
      bar.name === name
        ? { name, range: domain }
        : bar,
    );

    setBars(newBars);
  }

  function onPointChange(point) {
    const newPoints = points.map((p) =>
      p.name === point.name ? point : p,
    );
    setPoints(newPoints);
  }

  return (
    <div style={containerStyle}>
      <VictoryChart
        theme={VictoryTheme.clean}
        horizontal
        {...sharedProps}
        containerComponent={
          <VictoryZoomContainer
            responsive={false}
            allowPan={false}
            zoomDomain={zoomDomain}
            zoomDimension="y"
            onZoomDomainChange={
              handleZoom
            }
            clipContainerComponent={
              <VictoryClipContainer
                clipPadding={{
                  top: 15,
                  bottom: 15,
                }}
              />
            }
          />
        }
      >
        <VictoryAxis
          style={{
            axis: { stroke: "none" },
          }}
        />

        {bars.map((bar, index) => (
          <VictoryAxis
            dependentAxis
            key={index}
            axisComponent={
              <VictoryBrushLine
                name={bar.name}
                width={20}
                allowDraw={false}
                brushDomain={bar.range}
                onBrushDomainChange={
                  onDomainChange
                }
                brushStyle={{
                  fill: VictoryTheme
                    .clean.palette
                    ?.colors?.cyan,
                  opacity: ({
                    active,
                  }) =>
                    active ? 1 : 0.5,
                }}
              />
            }
            style={{
              axis: { stroke: "none" },
            }}
            axisValue={bar.name}
            tickFormat={() => ""}
          />
        ))}
        <VictoryScatter
          data={points}
          dataComponent={
            <DraggablePoint
              onPointChange={
                onPointChange
              }
            />
          }
          style={{
            data: {
              fill: VictoryTheme.clean
                .palette?.colors?.cyan,
              opacity: ({ active }) =>
                active ? 1 : 0.5,
              cursor: "move",
            },
          }}
          x="name"
          y="date"
          size={10}
        />
      </VictoryChart>
      <VictoryChart
        theme={VictoryTheme.clean}
        horizontal
        {...sharedProps}
        padding={{
          top: 30,
          left: 50,
          right: 30,
          bottom: 0,
        }}
        scale={{ y: "time" }}
        height={120}
        containerComponent={
          <VictoryBrushContainer
            responsive={false}
            brushDomain={zoomDomain}
            brushDimension="y"
            onBrushDomainChange={
              handleZoom
            }
          />
        }
      >
        <VictoryAxis
          style={{
            axis: { stroke: "none" },
          }}
        />
        <VictoryAxis
          dependentAxis
          orientation="top"
          style={{
            axis: { stroke: "none" },
            tickLabels: {
              fontSize: 20,
            },
          }}
          tickCount={3}
          tickFormat={(t) =>
            t.getFullYear()
          }
        />
        <VictoryScatter
          data={points}
          size={5}
          style={{
            data: {
              fill: VictoryTheme.clean
                .palette?.colors?.cyan,
            },
          }}
          x="name"
          y="date"
        />
        <VictoryBar
          style={{
            data: {
              fill: VictoryTheme.clean
                .palette?.colors?.cyan,
            },
          }}
          data={bars}
          x="name"
          y={(d) => d.range[0]}
          y0={(d) => d.range[1]}
        />
      </VictoryChart>
    </div>
  );
}

render(<App />);