{"size": 2611, "ext": "js", "max_stars_repo_path": "src/components/Analytics/AnalyticsEventsChart/index.js", "max_stars_repo_name": "jason-crowley/smart-surveys", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Analytics/AnalyticsEventsChart/index.js", "max_issues_repo_name": "jason-crowley/smart-surveys", "max_issues_repo_issues_event_min_datetime": "2021-03-09T13:03:04.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T15:46:12.000Z", "max_forks_repo_path": "src/components/Analytics/AnalyticsEventsChart/index.js", "max_forks_repo_name": "jason-crowley/smart-surveys", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 26.11, "max_line_length": 78, "alphanum_fraction": 0.5346610494}
import React from 'react';
import {
  VictoryChart,
  VictoryVoronoiContainer,
  VictoryAxis,
  VictoryBar,
  Bar,
  VictoryTooltip,
} from 'victory';
import moment from 'moment';
import AnalyticsVictoryTheme from '../AnalyticsVictoryTheme';
import { makeDomainFromDates } from 'utils/domainMakers';
import { assocPath } from 'ramda';

const COLORS = {
  'MedicationRequest': '#8884d8',
  'Condition': '#82ca9d',
  'Encounter': 'red',
};

const MinHeightBar = ({ x0, x, ...props }) => (
  <Bar x0={x0} x={Math.max(x0 + 0.5, x)} {...props} />
);

export default function AnalyticsEventsChart(props) {
  const {
    width = 450,
    height = 240,
    data,
    ...restProps
  } = props;

  // Get all unique times in data
  const times = new Set();
  for (const events of data) {
    for (const { startDate, endDate } of events) {
      times.add(+startDate);
      times.add(+endDate);
    }
  }

  // Calculate default domain
  const dates = Array.from(times, time => new Date(time));
  const domain = { y: makeDomainFromDates(dates) };

  return (
    <VictoryChart
      width={width} height={height} scale={{ y: 'time' }}
      horizontal
      domain={domain}
      theme={assocPath(['chart', 'padding', 'top'], 0, AnalyticsVictoryTheme)}
      containerComponent={<VictoryVoronoiContainer />}
      {...restProps}
    >
      <VictoryAxis
        invertAxis
        tickFormat={data.length ? undefined : () => ''}
        style={{
          grid: { stroke: 'none' },
          ticks: { stroke: 'none' },
          tickLabels: { fontSize: 10 },
        }}
      />
      <VictoryAxis
        dependentAxis
        style={{
          grid: { strokeDasharray: '2 2' },
          tickLabels: { fontSize: 10 },
        }}
      />
      {data.map(events => (
        <VictoryBar
          key={events[0].code.text}
          data={events}
          style={{ data: { fill: COLORS[events[0].category] } }}
          x={datum => datum.code.text}
          y0="startDate"
          y="endDate"
          barWidth={8}
          dataComponent={<MinHeightBar />}
          labels={({ datum: { startDate, endDate } }) => {
            const start = moment(startDate).format('MM/DD/YY');
            const end = moment(endDate).format('MM/DD/YY');
            return `${start}${(start === end) ? '' : ' - ' + end}`;
          }}
          labelComponent={
            <VictoryTooltip
              cornerRadius={2}
              dy={4}
              flyoutStyle={{ fill: '#fff' }}
              orientation="top"
              pointerLength={5}
            />
          }
        />
      ))}
    </VictoryChart>
  );
}
