tweak: charts

src/pages/charts/view/[id].tsx

@@ -45,8 +45,10 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
 const Chart: NextPage<Props> = ({ question, history }) => {
   return (
     <Layout page={"chart"}>
-      <div className="w-6/12 mb-4 mt-8 flex flex-row justify-center items-center bg-white">
+      <div className="flex flex-col w-12/12 mb-4 mt-8 justify-center items-center self-center">
-        <HistoryChart question={question} history={history} />
+        <div className="grid bg-white p-10">
+          <HistoryChart question={question} history={history} />
+        </div>
       </div>
     </Layout>
   );

src/web/display/HistoryChart.tsx

@@ -33,10 +33,10 @@ const data0 = [
   { date: 9, probability: 0.7 },
 ];
 
-let l = 5;
+let l = 50;
 const data = Array.from(Array(l).keys()).map((x) => ({
   date: x,
-  probability: x / l,
+  probability: Math.abs(Math.sin((5 * x) / l)),
 }));
 
 let getDate = (x) => {
@@ -51,105 +51,79 @@ let dataAsXy = data.map((datum) => ({
 
 export const HistoryChart: React.FC<Props> = ({ question, history }) => {
   return (
-    <VictoryChart
+    <div className="">
-      domainPadding={20}
+      <VictoryChart
-      theme={VictoryTheme.material}
+        domainPadding={20}
-      height={300}
+        theme={VictoryTheme.material}
-      containerComponent={<VictoryVoronoiContainer />}
+        height={400}
-      domain={{
+        width={500}
-        y: [0, 1],
+        containerComponent={<VictoryVoronoiContainer />}
-      }}
+        domain={{
-    >
+          y: [0, 1],
-      <VictoryGroup
+        }}
-        color="darkblue"
-        data={dataAsXy}
-        labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
-        labelComponent={
-          <VictoryTooltip
-            pointerLength={0}
-            dy={-12}
-            style={{
-              fontSize: 9,
-              fill: "black",
-              strokeWidth: 0.05,
-            }}
-            flyoutStyle={{
-              stroke: "black",
-              fill: "white",
-            }}
-            flyoutWidth={60}
-            cornerRadius={0}
-            flyoutPadding={7}
-          />
-        }
       >
-        <VictoryLine />
+        <VictoryLabel
-        <VictoryScatter size={({ active }) => (active ? 3.75 : 3)} />
+          text="Chart Title"
-      </VictoryGroup>
+          x={250}
-      <VictoryAxis
+          y={25}
-        // tickValues specifies both the number of ticks and where
+          textAnchor="middle"
-        // they are placed on the axis
+          style={{ fontSize: 20 }}
-        tickValues={data.map((datum) => datum.date)}
+        />
-        tickCount={10}
+        <VictoryGroup
-        tickFormat={dataAsXy.map((datum) => datum.x)}
+          color="darkblue"
-        style={{
+          data={dataAsXy}
-          grid: { stroke: null, strokeWidth: 0.5 },
+          labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
-        }}
+          labelComponent={
-        tickLabelComponent={
+            <VictoryTooltip
-          <VictoryLabel
+              pointerLength={0}
-            dy={0}
+              dy={-12}
-            angle={-30}
+              style={{
-            style={{ fontSize: 7, fill: "gray" }}
+                fontSize: 16,
-          />
+                fill: "black",
-        }
+                strokeWidth: 0.05,
-      />
+              }}
-      <VictoryAxis
+              flyoutStyle={{
-        dependentAxis
+                stroke: "black",
-        // tickFormat specifies how ticks should be displayed
+                fill: "white",
-        tickFormat={(x) => `${x * 100}%`}
+              }}
-        style={{
+              flyoutWidth={110}
-          grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
+              cornerRadius={0}
-        }}
+              flyoutPadding={7}
-      />
+            />
-    </VictoryChart>
+          }
+        >
+          <VictoryLine />
+          <VictoryScatter size={({ active }) => (active ? 3.75 : 3)} />
+        </VictoryGroup>
+        <VictoryAxis
+          // tickValues specifies both the number of ticks and where
+          // they are placed on the axis
+          // tickValues={dataAsXy.map((datum) => datum.x)}
+          // tickFormat={dataAsXy.map((datum) => datum.x)}
+          tickCount={7}
+          style={{
+            grid: { stroke: null, strokeWidth: 0.5 },
+          }}
+          tickLabelComponent={
+            <VictoryLabel
+              dy={0}
+              angle={-30}
+              style={{ fontSize: 12, fill: "gray" }}
+            />
+          }
+        />
+        <VictoryAxis
+          dependentAxis
+          // tickFormat specifies how ticks should be displayed
+          tickFormat={(x) => `${x * 100}%`}
+          style={{
+            grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
+          }}
+          tickLabelComponent={
+            <VictoryLabel dy={0} style={{ fontSize: 12, fill: "gray" }} />
+          }
+        />
+      </VictoryChart>
+    </div>
   );
 };
-
-/*
-    <VictoryChart
-      // domainPadding will add space to each side of VictoryBar to
-      // prevent it from overlapping the axis
-      domainPadding={20}
-      theme={VictoryTheme.material}
-      height={300}
-      title={"Blah"}
-      containerComponent={<VictoryVoronoiContainer />}
-    >
-      <VictoryGroup
-        data={data.map((datum) => ({ x: datum.date, y: datum.probability }))}
-        labels={data.map((datum) => `1%`)}
-        style={{ labels: { fill: "black", fontSize: 10 } }}
-        labelComponent={
-          <VictoryTooltip style={{ fontSize: 10, fill: "black" }} dy={-15} />
-        }
-      >
-        <VictoryLine
-          height={300}
-          width={300}
-          style={{
-            data: { stroke: "#000080" },
-            parent: { border: "1px solid #ccc" },
-          }}
-          domain={{
-            y: [0, 1],
-          }}
-        ></VictoryLine>
-        <VictoryScatter
-          style={{
-            data: { fill: "#000080" },
-          }}
-          size={3}
-        />
-      </VictoryGroup>
-    </VictoryChart>
-*/