victory#VictoryGroup JavaScript Examples

The following examples show how to use victory#VictoryGroup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Graph.jsx    From covid-trials-dashboard with MIT License 6 votes vote down vote up 
Graph = () => {
  return (
    <div>
      <VictoryChart
        domainPadding={{ x: 50 }}
        width={500}
        height={500}
        theme={VictoryTheme.material}
      >
        <VictoryGroup
          horizontal
          offset={20}
          style={{ data: { width: 15 } }}
          colorScale={[sadBlue, magenta, yellow, tourquese, green]}
        >
          {/* Need to bing the label data to the VictoryLabel for each bar */}
          {vaccinesData.map((mockData, i) => (
            <VictoryStack key={i}>
              {mockData.map((data, index) => {
                return <VictoryBar key={index} data={data} />
              })}
            </VictoryStack>
          ))}
        </VictoryGroup>
      </VictoryChart>
    </div>
  )
}
Example #2
Source File: CashFlowGraph.js    From actual with MIT License 5 votes vote down vote up 
function CashFlowGraph({ style, start, end, graphData, isConcise, compact }) {
  return (
    <Container>
      {(width, height, portalHost) =>
        graphData && (
          <VictoryChart
            scale={{ x: 'time' }}
            theme={theme}
            domainPadding={10}
            width={width}
            height={height}
            containerComponent={
              <VictoryVoronoiContainer voronoiDimension="x" />
            }
          >
            <VictoryGroup>
              <VictoryBar
                data={graphData.expenses}
                style={{ data: { fill: theme.colors.red } }}
              />
              <VictoryBar data={graphData.income} />
            </VictoryGroup>
            <VictoryLine
              data={graphData.balances}
              labelComponent={<Tooltip portalHost={portalHost} />}
              labels={x => x.premadeLabel}
              style={{
                data: { stroke: colors.n5 }
              }}
            />
            <VictoryAxis
              tickFormat={x => d.format(x, isConcise ? "MMM ''yy" : 'MMM d')}
              tickValues={graphData.balances.map(item => item.x)}
              tickCount={Math.min(5, graphData.balances.length)}
              offsetY={50}
            />
            <VictoryAxis dependentAxis crossAxis={false} />
          </VictoryChart>
        )
      }
    </Container>
  );
}
Example #3
Source File: NetWorthGraph.js    From actual with MIT License 5 votes vote down vote up 
function NetWorthGraph({ style, start, end, graphData, compact }) {
  const Chart = compact ? VictoryGroup : VictoryChart;

  return (
    <Container style={[style, compact && { height: 'auto' }]}>
      {(width, height, portalHost) =>
        graphData && (
          <Chart
            scale={{ x: 'time' }}
            theme={theme}
            domainPadding={{ x: 0, y: 10 }}
            width={width}
            height={height}
            containerComponent={
              <VictoryVoronoiContainer voronoiDimension="x" />
            }
            padding={
              compact && {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
              }
            }
          >
            <Area
              start={graphData.start}
              end={graphData.end}
              data={graphData.data}
            />
            {React.createElement(
              graphData.data.length === 1 ? VictoryBar : VictoryArea,
              {
                data: graphData.data,
                labelComponent: <Tooltip portalHost={portalHost} />,
                labels: x => x.premadeLabel,
                style: {
                  data:
                    graphData.data.length === 1
                      ? { width: 50 }
                      : {
                          clipPath: 'url(#positive)',
                          fill: 'url(#positive-gradient)'
                        }
                }
              }
            )}
            {graphData.data.length > 1 && (
              <VictoryArea
                data={graphData.data}
                style={{
                  data: {
                    clipPath: 'url(#negative)',
                    fill: 'url(#negative-gradient)',
                    stroke: theme.colors.red,
                    strokeLinejoin: 'round'
                  }
                }}
              />
            )}
            {!compact && (
              <VictoryAxis
                tickFormat={x => d.format(x, "MMM ''yy")}
                tickValues={graphData.data.map(item => item.x)}
                tickCount={Math.min(5, graphData.data.length)}
                offsetY={50}
              />
            )}
            {!compact && (
              <VictoryAxis dependentAxis crossAxis={!graphData.hasNegative} />
            )}
          </Chart>
        )
      }
    </Container>
  );
}
Example #4
Source File: Overview.js    From actual with MIT License 4 votes vote down vote up 
function CashFlowCard() {
  const end = monthUtils.currentDay();
  const start = monthUtils.currentMonth() + '-01';

  const data = useReport('cash_flow_simple', useArgsMemo(simpleCashFlow)(start, end));
  if (!data) {
    return null;
  }

  const { graphData } = data;
  const expense = -(graphData.expense || 0);
  const income = graphData.income || 0;

  return (
    <Card flex={1} to="/reports/cash-flow">
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row', padding: 20 }}>
          <View style={{ flex: 1 }}>
            <Block
              style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
            >
              Cash Flow
            </Block>
            <DateRange start={start} end={end} />
          </View>
          <View style={{ textAlign: 'right' }}>
            <Change
              amount={income - expense}
              style={{ color: colors.n6, fontWeight: 300 }}
            />
          </View>
        </View>

        <Container style={{ height: 'auto', flex: 1 }}>
          {(width, height, portalHost) => (
            <VictoryGroup
              colorScale={[theme.colors.blue, theme.colors.red]}
              width={100}
              height={height}
              theme={theme}
              domain={{
                x: [0, 100],
                y: [0, Math.max(income, expense, 100)]
              }}
              containerComponent={
                <VictoryVoronoiContainer voronoiDimension="x" />
              }
              labelComponent={
                <Tooltip
                  portalHost={portalHost}
                  offsetX={(width - 100) / 2}
                  offsetY={y => (y + 40 > height ? height - 40 : y)}
                  light={true}
                  forceActive={true}
                  style={{
                    padding: 0
                  }}
                />
              }
              padding={{
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
              }}
            >
              <VictoryBar
                data={[
                  {
                    x: 30,
                    y: Math.max(income, 5),
                    width: 20,
                    premadeLabel: (
                      <div style={{ textAlign: 'right' }}>
                        <div>Income</div>
                        <div>{integerToCurrency(income)}</div>
                      </div>
                    ),
                    labelPosition: 'left'
                  }
                ]}
                labels={d => d.premadeLabel}
              />
              <VictoryBar
                data={[
                  {
                    x: 60,
                    y: Math.max(expense, 5),
                    width: 20,
                    premadeLabel: (
                      <div>
                        <div>Expenses</div>
                        <div>{integerToCurrency(expense)}</div>
                      </div>
                    ),
                    labelPosition: 'right',
                    fill: theme.colors.red
                  }
                ]}
                labels={d => d.premadeLabel}
              />
            </VictoryGroup>
          )}
        </Container>
      </View>
    </Card>
  );
}