Skip to content

Commit

Permalink
new(demo/xychart): add BarGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
@williaster
williaster committed Oct 13, 2020
1 parent fa7c217 commit 8ee99bb
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 36 deletions.
66 changes: 44 additions & 22 deletions packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
AnimatedAxis,
AnimatedGrid,
DataProvider,
BarGroup,
BarSeries,
BarStack,
LineSeries,
Expand All @@ -29,6 +30,7 @@ export default function Example({ height }: Props) {
config,
data,
numTicks,
renderBarGroup,
renderBarSeries,
renderBarStack,
renderHorizontally,
Expand Down Expand Up @@ -56,28 +58,48 @@ export default function Example({ height }: Props) {
numTicks={numTicks}
/>
{renderBarStack && (
<g fillOpacity={renderLineSeries ? 0.5 : 1}>
<BarStack horizontal={renderHorizontally}>
<BarSeries
dataKey="New York"
data={data}
xAccessor={accessors.x['New York']}
yAccessor={accessors.y['New York']}
/>
<BarSeries
dataKey="San Francisco"
data={data}
xAccessor={accessors.x['San Francisco']}
yAccessor={accessors.y['San Francisco']}
/>
<BarSeries
dataKey="Austin"
data={data}
xAccessor={accessors.x.Austin}
yAccessor={accessors.y.Austin}
/>
</BarStack>
</g>
<BarStack horizontal={renderHorizontally}>
<BarSeries
dataKey="New York"
data={data}
xAccessor={accessors.x['New York']}
yAccessor={accessors.y['New York']}
/>
<BarSeries
dataKey="San Francisco"
data={data}
xAccessor={accessors.x['San Francisco']}
yAccessor={accessors.y['San Francisco']}
/>
<BarSeries
dataKey="Austin"
data={data}
xAccessor={accessors.x.Austin}
yAccessor={accessors.y.Austin}
/>
</BarStack>
)}
{renderBarGroup && (
<BarGroup horizontal={renderHorizontally}>
<BarSeries
dataKey="New York"
data={data}
xAccessor={accessors.x['New York']}
yAccessor={accessors.y['New York']}
/>
<BarSeries
dataKey="San Francisco"
data={data}
xAccessor={accessors.x['San Francisco']}
yAccessor={accessors.y['San Francisco']}
/>
<BarSeries
dataKey="Austin"
data={data}
xAccessor={accessors.x.Austin}
yAccessor={accessors.y.Austin}
/>
</BarGroup>
)}
{renderBarSeries && (
<BarSeries
Expand Down
41 changes: 27 additions & 14 deletions packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const dateScaleConfig = { type: 'band', paddingInner: 0.3 } as const;
const temperatureScaleConfig = { type: 'linear' } as const;
const numTicks = 4;
const data = cityTemperature.slice(200, 275);
const dataSmall = data.slice(25);
const dataSmall = data.slice(0, 25);
const getDate = (d: CityTemperature) => d.date;
const getSfTemperature = (d: CityTemperature) => Number(d['San Francisco']);
const getNegativeSFTemperature = (d: CityTemperature) => -getSfTemperature(d);
Expand Down Expand Up @@ -42,6 +42,7 @@ type ProvidedProps = {
renderHorizontally: boolean;
renderBarSeries: boolean;
renderBarStack: boolean;
renderBarGroup: boolean;
renderLineSeries: boolean;
sharedTooltip: boolean;
showGridColumns: boolean;
Expand Down Expand Up @@ -74,7 +75,9 @@ export default function ExampleControls({ children }: ControlsProps) {
const [snapTooltipToDatumX, setSnapTooltipToDatumX] = useState(true);
const [snapTooltipToDatumY, setSnapTooltipToDatumY] = useState(true);
const [sharedTooltip, setSharedTooltip] = useState(true);
const [renderBarOrBarStack, setRenderBarOrBarStack] = useState<'bar' | 'barstack'>('barstack');
const [renderBarStackOrGroup, setRenderBarStackOrGroup] = useState<'bar' | 'stack' | 'group'>(
'group',
);
const [renderLineSeries, setRenderLineSeries] = useState(false);
const [negativeValues, setNegativeValues] = useState(false);

Expand Down Expand Up @@ -117,20 +120,21 @@ export default function ExampleControls({ children }: ControlsProps) {
accessors,
animationTrajectory,
config,
data: renderBarOrBarStack === 'bar' ? data : dataSmall,
data: renderBarStackOrGroup === 'bar' ? data : dataSmall,
numTicks,
renderBarSeries: renderBarOrBarStack === 'bar',
renderBarStack: renderBarOrBarStack === 'barstack',
renderBarGroup: renderBarStackOrGroup === 'group',
renderBarSeries: renderBarStackOrGroup === 'bar',
renderBarStack: renderBarStackOrGroup === 'stack',
renderHorizontally,
renderLineSeries: renderBarOrBarStack === 'bar' && renderLineSeries,
renderLineSeries: renderBarStackOrGroup === 'bar' && renderLineSeries,
sharedTooltip,
showGridColumns,
showGridRows,
showHorizontalCrosshair,
showTooltip,
showVerticalCrosshair,
snapTooltipToDatumX: renderBarOrBarStack === 'bar' && snapTooltipToDatumX,
snapTooltipToDatumY: renderBarOrBarStack === 'bar' && snapTooltipToDatumY,
snapTooltipToDatumX: renderBarStackOrGroup === 'bar' && snapTooltipToDatumX,
snapTooltipToDatumY: renderBarStackOrGroup === 'bar' && snapTooltipToDatumY,
theme,
xAxisOrientation,
yAxisOrientation,
Expand Down Expand Up @@ -310,7 +314,7 @@ export default function ExampleControls({ children }: ControlsProps) {
<label>
<input
type="checkbox"
disabled={!showTooltip || renderBarOrBarStack === 'barstack'}
disabled={!showTooltip || renderBarStackOrGroup !== 'bar'}
onChange={() => setSnapTooltipToDatumX(!snapTooltipToDatumX)}
checked={showTooltip && snapTooltipToDatumX}
/>{' '}
Expand All @@ -319,7 +323,7 @@ export default function ExampleControls({ children }: ControlsProps) {
<label>
<input
type="checkbox"
disabled={!showTooltip || renderBarOrBarStack === 'barstack'}
disabled={!showTooltip || renderBarStackOrGroup !== 'bar'}
onChange={() => setSnapTooltipToDatumY(!snapTooltipToDatumY)}
checked={showTooltip && snapTooltipToDatumY}
/>{' '}
Expand Down Expand Up @@ -359,6 +363,7 @@ export default function ExampleControls({ children }: ControlsProps) {
<label>
<input
type="checkbox"
disabled={renderBarStackOrGroup !== 'bar'}
onChange={() => setRenderLineSeries(!renderLineSeries)}
checked={renderLineSeries}
/>{' '}
Expand All @@ -367,19 +372,27 @@ export default function ExampleControls({ children }: ControlsProps) {
<label>
<input
type="radio"
onChange={() => setRenderBarOrBarStack('bar')}
checked={renderBarOrBarStack === 'bar'}
onChange={() => setRenderBarStackOrGroup('bar')}
checked={renderBarStackOrGroup === 'bar'}
/>{' '}
bar
</label>
<label>
<input
type="radio"
onChange={() => setRenderBarOrBarStack('barstack')}
checked={renderBarOrBarStack === 'barstack'}
onChange={() => setRenderBarStackOrGroup('stack')}
checked={renderBarStackOrGroup === 'stack'}
/>{' '}
bar stack
</label>
<label>
<input
type="radio"
onChange={() => setRenderBarStackOrGroup('group')}
checked={renderBarStackOrGroup === 'group'}
/>{' '}
bar group
</label>
</div>
{/** data */}
<div>
Expand Down

0 comments on commit 8ee99bb

Please sign in to comment.