feat: further improvement to charts
This commit is contained in:
parent
ed19f8b391
commit
eee7dee608
|
|
@ -15,29 +15,82 @@ interface Props {
|
|||
history: number[];
|
||||
}
|
||||
|
||||
async function fakeGetQuestionByIdBinary(id) {
|
||||
return {
|
||||
id: "infer-958",
|
||||
title:
|
||||
"In the next six months, will U.S. and China announce the establishment of an ongoing bilateral dialog mechanism that includes discussions of emerging technologies?",
|
||||
url: "https://www.infer-pub.com/questions/958-in-the-next-six-months-will-u-s-and-china-announce-the-establishment-of-an-ongoing-bilateral-dialog-mechanism-that-includes-discussions-of-emerging-technologies",
|
||||
platform: "infer",
|
||||
platformLabel: "Infer",
|
||||
description:
|
||||
"The National Security Commission on Artificial Intelligence argues that establishing a regular, high-level diplomatic dialogue with China about artificial intelligence is key to developing and executing a strategy on how to remain competitive and safe as AI technology changes the world ([NSCAI Report Chapter 9](https://reports.nscai.gov/final-report/chapter-9/)). Examples of ongoing bilateral dialog mechanisms are the [Strategic and Economic Dialog](https://china.usc.edu/statements-obama-hu-bilateral-meeting-april-1-2009) under President Obama ([National Committee on American Foreign Policy—NCAFP](https://www.ncafp.org)), the [Comprehensive Economic Dialog](https://www.deccanherald.com/content/605333/trump-xi-establish-us-china.html) under President Trump, and the [Strategic Economic Dialog](https://www.treasury.gov/press-center/press-releases/pages/hp107.aspx) under President George W. Bush. Emerging technologies (e.g. artificial intelligence, quantum computing, and biotech) must be a core component of the dialog structure. \n",
|
||||
options: [
|
||||
{
|
||||
name: "Yes",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.0351,
|
||||
},
|
||||
{
|
||||
name: "No",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.9649,
|
||||
},
|
||||
],
|
||||
timestamp: "2022-04-19T13:09:13.000Z",
|
||||
stars: 2,
|
||||
qualityindicators: {
|
||||
stars: 2,
|
||||
numforecasts: 164,
|
||||
comments_count: 171,
|
||||
numforecasters: 64,
|
||||
},
|
||||
extra: [],
|
||||
};
|
||||
}
|
||||
|
||||
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`,
|
||||
options: [
|
||||
{
|
||||
name: "Yes",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.0351 + Math.abs(Math.sin(3 * x)),
|
||||
},
|
||||
{
|
||||
name: "No",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.9649 - Math.abs(Math.sin(3 * x)),
|
||||
},
|
||||
],
|
||||
}));
|
||||
return history;
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<Props> = async (
|
||||
context
|
||||
) => {
|
||||
let urlQuery = context.query; // this is an object, not a string which I have to parse!!
|
||||
|
||||
let initialQueryParameters = {
|
||||
query: "test",
|
||||
starsThreshold: 2,
|
||||
forecastsThreshold: 0,
|
||||
forecastingPlatforms: platforms.map((platform) => platform.name),
|
||||
id: null,
|
||||
...urlQuery,
|
||||
};
|
||||
|
||||
let results: FrontendForecast[] = [];
|
||||
if (initialQueryParameters.query != "") {
|
||||
results = await searchAccordingToQueryData(initialQueryParameters, 1);
|
||||
console.log(results);
|
||||
let question: FrontendForecast;
|
||||
let history: any[]; // replace with prop def.
|
||||
if (initialQueryParameters.id != null) {
|
||||
question = await fakeGetQuestionByIdBinary(initialQueryParameters.id);
|
||||
history = await fakeGetHistoryQuestionById(initialQueryParameters.id);
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
question: results[0] || null,
|
||||
history: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
question: question,
|
||||
history: history,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -46,12 +99,59 @@ const Chart: NextPage<Props> = ({ question, history }) => {
|
|||
return (
|
||||
<Layout page={"chart"}>
|
||||
<div className="flex flex-col w-12/12 mb-4 mt-8 justify-center items-center self-center">
|
||||
<div className="grid bg-white p-10">
|
||||
<HistoryChart question={question} history={history} />
|
||||
</div>
|
||||
<HistoryChart question={question} history={history} />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
|
||||
/*
|
||||
|
||||
async function fakeGetQuestionByIdMultipleOptions(id) {
|
||||
return {
|
||||
id: "infer-954",
|
||||
title:
|
||||
"Will the U.S. Congress pass a tax credit for semiconductor manufacturing or design before 1 January 2023?",
|
||||
url: "https://www.infer-pub.com/questions/954-will-the-u-s-congress-pass-a-tax-credit-for-semi-conductor-manufacturing-or-design-before-1-january-2023",
|
||||
platform: "infer",
|
||||
platformLabel: "Infer",
|
||||
description:
|
||||
"The National Security Commission on Artificial Intelligence identified developments in micro-electronics and semiconductors as critical to the United States' competitive strategy ([NSCAI Chapter 13](https://reports.nscai.gov/final-report/chapter-13/)). The Facilitating American-Built Semiconductors Act would offer an investment tax credit for investments in semiconductor manufacturing ([Congress.Gov](https://www.congress.gov/bill/117th-congress/senate-bill/2107/text?r=68&s=1), [Senate Finance](https://www.finance.senate.gov/chairmans-news/wyden-crapo-cornyn-warner-daines-stabenow-introduce-bill-to-boost-domestic-manufacturing-of-semiconductors)). Tech companies are lobbying not only for passage, but for expansion of the credit to cover semiconductor design as well ([Bloomberg](https://www.bloomberg.com/news/articles/2021-12-01/corporate-leaders-push-congress-to-speed-aid-for-semiconductors), [SIA](https://www.semiconductors.org/sia-applauds-senate-introduction-of-fabs-act/)).\n",
|
||||
options: [
|
||||
{
|
||||
name: "Yes, for both manufacturing and design ",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.4129,
|
||||
},
|
||||
{
|
||||
name: "Yes, for only manufacturing",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.3103,
|
||||
},
|
||||
{
|
||||
name: "Yes, for only design",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.0235,
|
||||
},
|
||||
{
|
||||
name: "No",
|
||||
type: "PROBABILITY",
|
||||
probability: 0.2533,
|
||||
},
|
||||
],
|
||||
timestamp: "2022-04-19T13:09:21.000Z",
|
||||
stars: 2,
|
||||
qualityindicators: {
|
||||
stars: 2,
|
||||
numforecasts: 156,
|
||||
comments_count: 168,
|
||||
numforecasters: 66,
|
||||
},
|
||||
extra: [],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import ReactMarkdown from "react-markdown";
|
|||
import { FrontendForecast } from "../../platforms";
|
||||
import { Card } from "../Card";
|
||||
import { ForecastFooter } from "./ForecastFooter";
|
||||
import { cleanText } from "../../utils";
|
||||
|
||||
const truncateText = (length: number, text: string): string => {
|
||||
if (!text) {
|
||||
|
|
@ -76,24 +77,6 @@ if (!String.prototype.replaceAll) {
|
|||
};
|
||||
}
|
||||
|
||||
const cleanText = (text: string): string => {
|
||||
// Note: should no longer be necessary
|
||||
let textString = !!text ? text : "";
|
||||
textString = textString
|
||||
.replaceAll("] (", "](")
|
||||
.replaceAll(") )", "))")
|
||||
.replaceAll("( [", "([")
|
||||
.replaceAll(") ,", "),")
|
||||
.replaceAll("==", "") // Denotes a title in markdown
|
||||
.replaceAll("Background\n", "")
|
||||
.replaceAll("Context\n", "")
|
||||
.replaceAll("--- \n", "- ")
|
||||
.replaceAll(/\[(.*?)\]\(.*?\)/g, "$1");
|
||||
textString = textString.slice(0, 1) == "=" ? textString.slice(1) : textString;
|
||||
//console.log(textString)
|
||||
return textString;
|
||||
};
|
||||
|
||||
const primaryForecastColor = (probability: number) => {
|
||||
if (probability < 0.03) {
|
||||
return "bg-red-600";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from "react";
|
|||
|
||||
import { FrontendForecast } from "../platforms";
|
||||
import * as V from "victory";
|
||||
import { HistoryChartFlyout } from "./HistoryChartFlyout";
|
||||
import {
|
||||
VictoryBar,
|
||||
VictoryLabel,
|
||||
|
|
@ -15,86 +14,119 @@ import {
|
|||
VictoryGroup,
|
||||
VictoryVoronoiContainer,
|
||||
} from "victory";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { cleanText } from "../utils";
|
||||
import gfm from "remark-gfm";
|
||||
|
||||
interface Props {
|
||||
question: FrontendForecast;
|
||||
history: number[];
|
||||
}
|
||||
|
||||
const data0 = [
|
||||
{ date: 1, probability: 0.1 },
|
||||
{ date: 2, probability: 0.2 },
|
||||
{ date: 3, probability: 0.4 },
|
||||
{ date: 4, probability: 0.6 },
|
||||
{ date: 5, probability: 0.6 },
|
||||
{ date: 6, probability: 0.65 },
|
||||
{ date: 7, probability: 0.65 },
|
||||
{ date: 8, probability: 0.65 },
|
||||
{ date: 9, probability: 0.7 },
|
||||
];
|
||||
|
||||
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)),
|
||||
}));
|
||||
|
||||
let getDate = (x) => {
|
||||
let date = new Date(x);
|
||||
return date.toISOString().slice(5, 10).replaceAll("-", "/");
|
||||
};
|
||||
|
||||
let dataAsXy = data.map((datum) => ({
|
||||
x: getDate(datum.date * (1000 * 60 * 60 * 24)),
|
||||
y: datum.probability,
|
||||
}));
|
||||
let dataAsXy = (data) =>
|
||||
data.map((datum) => ({
|
||||
x: getDate(datum.date * (1000 * 60 * 60 * 24)),
|
||||
y: datum.probability,
|
||||
}));
|
||||
|
||||
let colors = [
|
||||
"royalblue",
|
||||
"crimson",
|
||||
"darkgreen",
|
||||
"dodgerblue",
|
||||
"darkviolet",
|
||||
"limegreen",
|
||||
];
|
||||
const getVictoryGroup = (data, i) => {
|
||||
return (
|
||||
<VictoryGroup color={colors[i] || "darkgray"} data={dataAsXy(data)}>
|
||||
<VictoryLine
|
||||
name={`line${i}`}
|
||||
style={{ labels: { display: "none" } }}
|
||||
labels={() => null}
|
||||
labelComponent={<span></span>}
|
||||
/>
|
||||
{
|
||||
<VictoryScatter
|
||||
style={{ labels: { display: "none" } }}
|
||||
size={({ active }) => (active ? 3.75 : 3)}
|
||||
labels={() => null}
|
||||
labelComponent={<span></span>}
|
||||
/>
|
||||
// No idea how to disable labels
|
||||
}
|
||||
</VictoryGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export const HistoryChart: React.FC<Props> = ({ question, history }) => {
|
||||
return (
|
||||
<div className="">
|
||||
<div className="grid grid-rows-1 bg-white p-10">
|
||||
<a
|
||||
className="text‑inherit no-underline"
|
||||
href={question.url}
|
||||
target="_blank"
|
||||
>
|
||||
<h1 className="text-3xl font-normal text-center mt-5">
|
||||
{question.title}
|
||||
</h1>
|
||||
</a>
|
||||
<VictoryChart
|
||||
domainPadding={20}
|
||||
padding={{ top: 20, bottom: 50, left: 50, right: 50 }}
|
||||
theme={VictoryTheme.material}
|
||||
height={400}
|
||||
height={340}
|
||||
width={500}
|
||||
containerComponent={<VictoryVoronoiContainer />}
|
||||
containerComponent={
|
||||
<VictoryVoronoiContainer
|
||||
labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
|
||||
labelComponent={
|
||||
<VictoryTooltip
|
||||
pointerLength={0}
|
||||
dy={-12}
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fill: "black",
|
||||
strokeWidth: 0.05,
|
||||
}}
|
||||
flyoutStyle={{
|
||||
stroke: "black",
|
||||
fill: "white",
|
||||
}}
|
||||
flyoutWidth={80}
|
||||
cornerRadius={0}
|
||||
flyoutPadding={7}
|
||||
/>
|
||||
}
|
||||
voronoiBlacklist={
|
||||
Array.from(Array(5).keys()).map((x, i) => `line${i}`)
|
||||
// see: https://github.com/FormidableLabs/victory/issues/545
|
||||
}
|
||||
/>
|
||||
}
|
||||
domain={{
|
||||
y: [0, 1],
|
||||
}}
|
||||
>
|
||||
<VictoryLabel
|
||||
text="Chart Title"
|
||||
x={250}
|
||||
y={25}
|
||||
textAnchor="middle"
|
||||
style={{ fontSize: 20 }}
|
||||
/>
|
||||
<VictoryGroup
|
||||
color="darkblue"
|
||||
data={dataAsXy}
|
||||
labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
|
||||
labelComponent={
|
||||
<VictoryTooltip
|
||||
pointerLength={0}
|
||||
dy={-12}
|
||||
style={{
|
||||
fontSize: 16,
|
||||
fill: "black",
|
||||
strokeWidth: 0.05,
|
||||
}}
|
||||
flyoutStyle={{
|
||||
stroke: "black",
|
||||
fill: "white",
|
||||
}}
|
||||
flyoutWidth={110}
|
||||
cornerRadius={0}
|
||||
flyoutPadding={7}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<VictoryLine />
|
||||
<VictoryScatter size={({ active }) => (active ? 3.75 : 3)} />
|
||||
</VictoryGroup>
|
||||
{[data, data2]
|
||||
.slice(0, 5)
|
||||
.map((dataset, i) => getVictoryGroup(dataset, i))}
|
||||
<VictoryAxis
|
||||
// tickValues specifies both the number of ticks and where
|
||||
// they are placed on the axis
|
||||
|
|
@ -108,7 +140,7 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
|
|||
<VictoryLabel
|
||||
dy={0}
|
||||
angle={-30}
|
||||
style={{ fontSize: 12, fill: "gray" }}
|
||||
style={{ fontSize: 10, fill: "gray" }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -120,10 +152,16 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
|
|||
grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
|
||||
}}
|
||||
tickLabelComponent={
|
||||
<VictoryLabel dy={0} style={{ fontSize: 12, fill: "gray" }} />
|
||||
<VictoryLabel dy={0} style={{ fontSize: 10, fill: "gray" }} />
|
||||
}
|
||||
/>
|
||||
</VictoryChart>
|
||||
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[gfm]}
|
||||
children={question.description}
|
||||
className="m-5 text-lg"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
export const HistoryChartFlyout = ({ x, y, datum, dx, dy }) => {
|
||||
return <div>{x}</div>;
|
||||
};
|
||||
|
|
@ -9,3 +9,21 @@ export const reqToBasePath = (req: IncomingMessage) => {
|
|||
// we could just hardcode http://localhost:3000 here, but then `next dev -p <CUSTOM_PORT>` would break
|
||||
return "http://" + req.headers.host;
|
||||
};
|
||||
|
||||
export const cleanText = (text: string): string => {
|
||||
// Note: should no longer be necessary
|
||||
let textString = !!text ? text : "";
|
||||
textString = textString
|
||||
.replaceAll("] (", "](")
|
||||
.replaceAll(") )", "))")
|
||||
.replaceAll("( [", "([")
|
||||
.replaceAll(") ,", "),")
|
||||
.replaceAll("==", "") // Denotes a title in markdown
|
||||
.replaceAll("Background\n", "")
|
||||
.replaceAll("Context\n", "")
|
||||
.replaceAll("--- \n", "- ")
|
||||
.replaceAll(/\[(.*?)\]\(.*?\)/g, "$1");
|
||||
textString = textString.slice(0, 1) == "=" ? textString.slice(1) : textString;
|
||||
//console.log(textString)
|
||||
return textString;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user