From d21e7c0edb0bdb46b8c08152a28737967e050765 Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Wed, 20 Apr 2022 00:13:50 -0400 Subject: [PATCH] chore: committing before debugging --- src/pages/charts/view/[id].tsx | 10 ++-- src/web/display/HistoryChart.tsx | 98 ++++++++++++++++++++------------ 2 files changed, 67 insertions(+), 41 deletions(-) diff --git a/src/pages/charts/view/[id].tsx b/src/pages/charts/view/[id].tsx index 8d635eb..c108f72 100644 --- a/src/pages/charts/view/[id].tsx +++ b/src/pages/charts/view/[id].tsx @@ -53,17 +53,17 @@ async function fakeGetHistoryQuestionById(id) { let l = 30; let history = Array.from(Array(l).keys()).map((x) => ({ - timestamp: `2022-04-${`0${x}`.slice(-2)}T13:09:13.000Z`, + timestamp: `2022-04-${`0${x + 1}`.slice(-2)}T13:09:13.000Z`, options: [ { - name: "Yes", + name: "X", type: "PROBABILITY", - probability: 0.0351 + Math.abs(Math.sin(3 * x)), + probability: 0.0351 + Math.abs(Math.sin(3 * x)) / 2, }, { - name: "No", + name: "Y", type: "PROBABILITY", - probability: 0.9649 - Math.abs(Math.sin(3 * x)), + probability: 0.9649 - Math.abs(Math.sin(3 * x)) / 2, }, ], })); diff --git a/src/web/display/HistoryChart.tsx b/src/web/display/HistoryChart.tsx index f0b3f9f..0f2a6a9 100644 --- a/src/web/display/HistoryChart.tsx +++ b/src/web/display/HistoryChart.tsx @@ -18,28 +18,13 @@ import { import ReactMarkdown from "react-markdown"; import { cleanText } from "../utils"; import gfm from "remark-gfm"; +import { xrisk } from "../../backend/platforms/xrisk"; interface Props { question: FrontendForecast; - history: number[]; + history: any[]; } -let l = 50; -const data = Array.from(Array(l).keys()).map((x) => ({ - date: x, - probability: Math.abs(Math.sin((5 * x) / l)), -})); - -const data2 = Array.from(Array(l).keys()).map((x) => ({ - date: x, - probability: 1 - Math.abs(Math.sin((5 * x) / l)), -})); - -const data3 = Array.from(Array(l).keys()).map((x) => ({ - date: x, - probability: 1 - Math.abs(Math.sin((5 * x + 20) / l)), -})); - const buildDataset = (n, fn) => { return Array.from(Array(n).keys()).map((x) => ({ date: x, @@ -47,33 +32,48 @@ const buildDataset = (n, fn) => { })); }; -let getDate = (x) => { +let getDate0 = (x) => { + // for fake data let date = new Date(x); return date.toISOString().slice(5, 10).replaceAll("-", "/"); }; +let timestampToString = (x) => { + // for real timestamps + console.log(x); + let date = new Date(Date.parse(x)); + let dayOfMonth = date.getDate(); + let month = date.getMonth() + 1; + let year = date.getFullYear(); + let dateString = `${("0" + dayOfMonth).slice(-2)}/${("0" + month).slice( + -2 + )}/${year.toString().slice(-2)}`; + console.log(dateString); + return dateString; +}; + let dataAsXy = (data) => data.map((datum) => ({ - x: getDate(datum.date * (1000 * 60 * 60 * 24)), + x: timestampToString(datum.date), //getDate(datum.date * (1000 * 60 * 60 * 24)), y: datum.probability, })); -let colors = ["dodgerblue", "crimson", "seagreen", "darkviolet", "turquoise"]; +const colors = ["dodgerblue", "crimson", "seagreen", "darkviolet", "turquoise"]; const getVictoryGroup = (data, i) => { return ( null} - labelComponent={} + //style={{ labels: { display: "none" } }} + //labels={() => null} + //labelComponent={} /> { (active ? 3.75 : 3)} - labels={() => null} - labelComponent={} + //labels={() => null} + //labelComponent={} /> // No idea how to disable labels } @@ -84,14 +84,34 @@ const getVictoryGroup = (data, i) => { export const HistoryChart: React.FC = ({ question, history }) => { let height = 400; let width = 500; - let dataSetsNames = ["Yes", "No", "Maybe", "Perhaps", "Possibly"]; - let dataSets = [ - buildDataset(50, (x) => 0.5), - buildDataset(50, (x) => Math.abs(Math.sin((5 * x) / 50) / 2)), - buildDataset(50, (x) => 1 - Math.abs(Math.sin((5 * x) / 50) / 2)), - buildDataset(50, (x) => Math.abs(Math.sin((3 * x + 25) / 50))), - buildDataset(50, (x) => 1 - Math.abs(Math.sin((3 * x + 25) / 50))), - ]; + let padding = { top: 20, bottom: 50, left: 50, right: 100 }; + // let dataSetsNames = ["Yes", "No", "Maybe", "Perhaps", "Possibly"]; + let dataSetsNames = []; + history.forEach((item) => { + let optionNames = item.options.map((option) => option.name); + dataSetsNames.push(...optionNames); + }); + dataSetsNames = [...new Set(dataSetsNames)].slice(0, 5); // take the first 5 + let dataSets = []; + dataSetsNames.forEach((name) => { + let newDataset = []; + let historyItems = history.forEach((item) => { + let relevantItemsArray = item.options.filter((x) => x.name == name); + let date = item.timestamp; + if (relevantItemsArray.length == 1) { + let relevantItem = relevantItemsArray[0]; + if (relevantItem.type == "PROBABILITY") { + let result = { + date: date, + probability: relevantItem.probability, + }; + newDataset.push(result); + } + } + }); + dataSets.push(newDataset); + }); + let dataSetsLength = dataSets.length; return ( @@ -107,7 +127,7 @@ export const HistoryChart: React.FC = ({ question, history }) => { = ({ question, history }) => { /> } voronoiBlacklist={ - Array.from(Array(5).keys()).map((x, i) => `line${i}`) + ["line0", "line1", "line2", "line3", "line4"] + + //Array.from(Array(5).keys()).map((x, i) => `line${i}`) // see: https://github.com/FormidableLabs/victory/issues/545 } /> @@ -171,6 +193,10 @@ export const HistoryChart: React.FC = ({ question, history }) => { style={{ grid: { stroke: null, strokeWidth: 0.5 }, }} + //axisLabelComponent={ + // + //} + // label="Date (dd/mm/yy)" tickLabelComponent={