Skip to content

Commit

Permalink
Change time range and enable scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbrarNad
AbrarNad committed Dec 18, 2024
1 parent 5187513 commit abf3d1f
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 69 deletions.
4 changes: 2 additions & 2 deletions public/sandbox/config-sandbox.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"path": "viz-guardrails/DataExplorer.tsx",
"parameters": {
"dataset": "clean_data",
"start_date": "2023-01-03",
"end_date": "2023-12-31",
"start_date": "2019-01-03",
"end_date": "2024-12-01",
"initial_selection": [],
"allow_time_slider": true,
"allow_guardrail_selector": true,
Expand Down
2 changes: 1 addition & 1 deletion src/public/viz-guardrails/Selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function Selector({
// { value: 'super_summ', label: 'Sup. Summ.' },
// { value: 'juxt_data', label: 'Juxt. Data' },
// { value: 'juxt_summ', label: 'Juxt. Summ.' },
{ value: 'random', label: 'Random' },
{ value: 'super_data', label: 'Random' },
]}
/>
</>
Expand Down
142 changes: 76 additions & 66 deletions src/public/viz-guardrails/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@ export function Sidebar({
range,
guardrail,
} : {
parameters: ChartParams,
data: any[],
dataname: string,
items: any[],
selection: any[] | null,
setSelection: (value: Array<string>) => void,
trackSelection: (value: Array<string>) => void,
range: [Date, Date] | null,
guardrail: string
parameters: ChartParams,
data: any[],
dataname: string,
items: any[],
selection: any[] | null,
setSelection: (value: Array<string>) => void,
trackSelection: (value: Array<string>) => void,
range: [Date, Date] | null,
guardrail: string
}) {
// ---------------------------- Setup ----------------------------
// ---------------------------- Setup ----------------------------

const xScale = useMemo(() => {
if (range) {
Expand Down Expand Up @@ -81,8 +81,8 @@ export function Sidebar({

const paths = items?.map((x) => ({
country: x.name as string,
path: lineGenerator(data.filter((val) => (val[parameters.cat_var] === x.name))) as string,
area: areaGenerator(data.filter((val) => (val[parameters.cat_var] === x.name))) as string,
path: lineGenerator(data.filter((val) => val[parameters.cat_var] === x.name)) as string,
area: areaGenerator(data.filter((val) => val[parameters.cat_var] === x.name)) as string,
}));

return paths;
Expand All @@ -99,60 +99,70 @@ export function Sidebar({
// ---------------------------- Render ----------------------------

return (
<Checkbox.Group
key={`${dataname}_checkboxgroup`}
defaultValue={selection as string[]}
orientation="vertical"
onChange={(xs) => { setSelection(xs); trackSelection(xs); }}
spacing={0}
offset="sm"
styles={(parameters.allow_selection === false) ? { root: { pointerEvents: 'none' } } : { root: { pointerEvents: 'auto' } }}
>
{items?.map((item) => (
<>
{item.name === 'Eldoril North' ? <Divider size="xs" label="Policy A" labelPosition="left" color="black" /> : null}
{item.name === 'Eldoril West' ? <Divider size="xs" label="Policy B" labelPosition="left" color="black" /> : null}
{item.name === 'Silvoria North' ? <Divider size="xs" label="Policy C" labelPosition="left" color="black" /> : null}

<Grid key={`${item.name}_grid`} grow gutter={8} columns={2}>

<Grid.Col key={`${item.name}_grid1`} span={1}>
<Checkbox
key={`${item.name}_checkbox`}
value={item.name}
label={item.name}
color={parameters.allow_selection ? 'blue' : 'gray'}
styles={{ root: { display: 'flex', alignItems: 'flex-end', padding: '2px 0' }, inner: { display: displayVar } }}
>
{item.name}
</Checkbox>
</Grid.Col>

<Grid.Col key={`${item.name}_grid2`} span={guardrail === 'juxt_data' ? 'auto' : 3}>
<svg key={`${item.name}_sparksvg`} style={{ width: `${width}`, height: `${height}` }}>
<path
id={`${item.name}_sparkarea`}
key={`${item.name}_sparkarea`}
fill={selection?.includes(item.name) ? colorScale(item.name) : 'gray'}
stroke="none"
opacity={0.25}
d={sparkLines?.filter((x) => x.country === item.name)[0].area}
/>
<path
id={`${item.name}_spark`}
key={`${item.name}_spark`}
fill="none"
stroke={selection?.includes(item.name) ? colorScale(item.name) : 'gray'}
strokeWidth={0.75}
d={sparkLines?.filter((x) => x.country === item.name)[0].path}
/>
</svg>
</Grid.Col>

</Grid>
</>
))}
</Checkbox.Group>
<div style={{ maxHeight: '400px', overflowY: 'auto', padding: '8px' }}>
<Checkbox.Group
key={`${dataname}_checkboxgroup`}
defaultValue={selection as string[]}
orientation="vertical"
onChange={(xs) => {
setSelection(xs);
trackSelection(xs);
}}
spacing={0}
offset="sm"
styles={
parameters.allow_selection === false
? { root: { pointerEvents: 'none' } }
: { root: { pointerEvents: 'auto' } }
}
>
{items?.map((item) => (
<>
{item.name === 'Eldoril North' ? <Divider size="xs" label="Policy A" labelPosition="left" color="black" /> : null}
{item.name === 'Eldoril West' ? <Divider size="xs" label="Policy B" labelPosition="left" color="black" /> : null}
{item.name === 'Silvoria North' ? <Divider size="xs" label="Policy C" labelPosition="left" color="black" /> : null}

<Grid key={`${item.name}_grid`} grow gutter={8} columns={2}>
<Grid.Col key={`${item.name}_grid1`} span={1}>
<Checkbox
key={`${item.name}_checkbox`}
value={item.name}
label={item.name}
color={parameters.allow_selection ? 'blue' : 'gray'}
styles={{
root: { display: 'flex', alignItems: 'flex-end', padding: '2px 0' },
inner: { display: displayVar },
}}
>
{item.name}
</Checkbox>
</Grid.Col>

<Grid.Col key={`${item.name}_grid2`} span={guardrail === 'juxt_data' ? 'auto' : 3}>
<svg key={`${item.name}_sparksvg`} style={{ width: `${width}`, height: `${height}` }}>
<path
id={`${item.name}_sparkarea`}
key={`${item.name}_sparkarea`}
fill={selection?.includes(item.name) ? colorScale(item.name) : 'gray'}
stroke="none"
opacity={0.25}
d={sparkLines?.filter((x) => x.country === item.name)[0]?.area}
/>
<path
id={`${item.name}_spark`}
key={`${item.name}_spark`}
fill="none"
stroke={selection?.includes(item.name) ? colorScale(item.name) : 'gray'}
strokeWidth={0.75}
d={sparkLines?.filter((x) => x.country === item.name)[0]?.path}
/>
</svg>
</Grid.Col>
</Grid>
</>
))}
</Checkbox.Group>
</div>
);
}

Expand Down

0 comments on commit abf3d1f

Please sign in to comment.