Merge branch 'zc/hist'

public/viz-guardrails/consent.md

@@ -11,7 +11,7 @@ You are being asked to participate in a research study. Before you
               the study, the procedures to be followed, and any benefits, risks
               or discomfort that you may experience as a result of your
               participation. This form presents information about the study so
-              that you may make a fully informed decision regarding your
+            that you may make a fully informed decision regarding your
               participation.
 
 ## Purpose of the Study

src/public/viz-guardrails/DataExplorer.tsx

@@ -10,6 +10,7 @@ import LineChart from './LineChart';
 import Sidebar from './Sidebar';
 import RangeSelector from './RangeSelector';
 import Selector from './Selector';
+import { Histogram } from './Histogram';
 import { Registry, initializeTrrack } from '@trrack/core';
 import debounce from 'lodash.debounce';
 
@@ -54,7 +55,6 @@ export function DataExplorer({ parameters, setAnswer }: StimulusParams<ChartPara
         }
 
         return null;
-
     }, [data, range]);
 
     // ---------------------------- Trrack ----------------------------
@@ -133,14 +133,17 @@ export function DataExplorer({ parameters, setAnswer }: StimulusParams<ChartPara
                         <Text fz='xs' c='dimmed'>{'Shaded area represents the middle 50% of all values.'}</Text>
                     ) : null}
                     <Stack>
-                        <LineChart 
-                            parameters={parameters} 
-                            data={filteredData} 
-                            items={items} 
-                            selection={selection} 
-                            range={range} 
-                            guardrail={guardrail}
-                        />
+                        <Group>
+                            {guardrail === 'juxt_summ' ? <Histogram parameters={parameters} data={filteredData} selection={selection} ></Histogram> : null}
+                            <LineChart 
+                                parameters={parameters} 
+                                data={filteredData} 
+                                items={items} 
+                                selection={selection} 
+                                range={range} 
+                                guardrail={guardrail}
+                            />
+                        </Group>
                         {parameters.allow_time_slider ?
                         (<div style={{ width: '500px' }}>
                             <RangeSelector 

src/public/viz-guardrails/Histogram.tsx

@@ -0,0 +1,70 @@
+import { from, escape } from 'arquero';
+import { useMemo } from 'react';
+import * as d3 from 'd3';
+import { useResizeObserver } from '@mantine/hooks';
+import { ChartParams } from './DataExplorer';
+
+const margin = {
+    top: 30,
+    left: 60,
+    right: 80,
+    bottom: 50
+};
+
+export function Histogram({
+    data,
+    selection,
+    parameters,
+} : {
+    data: unknown[];
+    selection: string[];
+    parameters: ChartParams
+}
+) { 
+    const [ref, {width, height}] = useResizeObserver();
+
+    console.log(parameters);
+
+    const allData = useMemo(() => {
+        const tempData = data.map((d) => ({...d, value: +d[parameters.y_var]}));
+        return from(tempData);
+    }, [data, parameters]);
+
+    const selectedDataRange = useMemo(() => {
+        return d3.extent(allData.filter(escape((d) => selection.includes(d[parameters.cat_var]))).array('value')) as [unknown, unknown] as [number, number];
+    }, [allData, selection, parameters]);
+
+
+    const yScale = useMemo(() => {
+        return d3.scaleLinear([margin.top, height - margin.bottom]).domain(d3.extent(allData.array('value') as number[]).reverse() as unknown as [number, number]);
+    }, [allData, height]);
+
+    const textFormat = d3.format('.0%');
+
+    console.log(selectedDataRange);
+
+    console.log(yScale.domain(), yScale.range(), data);
+
+    return(
+        <svg ref={ref} style={{height: '400px', width: '60px', overflow: 'visible'}}> 
+            {/* <YAxis yScale={yScale} horizontalPosition={275} xRange={[0, 0]}/> */}
+            {/* <line x1={margin.left} x2={margin.left} y1={margin.top} y2={height - margin.bottom} strokeWidth={1} stroke={'black'}></line> */}
+            <rect y={yScale(selectedDataRange[1])} height={yScale(selectedDataRange[0]) - yScale(selectedDataRange[1])} x={margin.left - 10} width={10} opacity={0.2} fill="black"></rect>
+            <text style={{fontSize: 10, dominantBaseline: 'middle', textAnchor: 'middle', fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'}} x={25} y={margin.top - 5}>{textFormat(yScale.domain()[0])}</text>
+            <text style={{fontSize: 10, dominantBaseline: 'middle', textAnchor: 'middle', fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'}} x={25} y={height - margin.bottom + 8}>{textFormat(yScale.domain()[1])}</text>
+            <text style={{fontSize: 10, dominantBaseline: 'middle', fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'}} x={margin.left - 5} y={yScale(selectedDataRange[0])}>{textFormat(selectedDataRange[0])}</text>
+            <text style={{fontSize: 10, dominantBaseline: 'middle', fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'}} x={margin.left - 5} y={yScale(selectedDataRange[1])}>{textFormat(selectedDataRange[1])}</text>
+
+
+
+            {data.map((d) => <rect opacity={.2} fill={+d[parameters.y_var] > 0 ? '#1f77b4' : '#d62728ed'} x={0} width={50} y={yScale(+d.Value)} height={1}></rect>)}
+            <line strokeWidth={2} stroke="black" style={{fontSize: 10, dominantBaseline: 'middle'}} x1={0} x2={50} y1={yScale(selectedDataRange[0])} y2={yScale(selectedDataRange[0])}></line>
+            <line strokeWidth={2} stroke="black" x1={0} x2={50} y1={yScale(selectedDataRange[1])} y2={yScale(selectedDataRange[1])}></line>
+            <line strokeWidth={2} stroke="black" x1={0} x2={0} y1={yScale(selectedDataRange[1])} y2={yScale(selectedDataRange[0])}></line>
+            <line strokeWidth={2} stroke="black" x1={50} x2={50} y1={yScale(selectedDataRange[1])} y2={yScale(selectedDataRange[0])}></line>
+
+            <path fill={'black'} opacity="0.2" d={`M${margin.left}, ${yScale(selectedDataRange[1])} L ${width + 20 + 33}, ${margin.top} L ${width + 20 + 33}, ${height - margin.bottom} L ${margin.left}, ${yScale(selectedDataRange[0])}`}></path>
+        </svg>
+    );
+
+}

src/public/viz-guardrails/Sidebar.tsx

@@ -92,7 +92,6 @@ export function Sidebar({
 
     return (
             <Checkbox.Group
-                key='chip_group'
                 orientation='vertical'
                 onChange={(xs) => {setSelection(xs); trackSelection(xs);}}
                 spacing={0}