export chart, range selector, naming series, customLinks on chart

index.html

@@ -15,11 +15,9 @@
         margin: 0;
       }
       .wrapper {
-        width: 100%;
-        flex-wrap: wrap;
         border: 1px solid #ccc;
         padding: 20px;
-        width: 500px;
+        width: 700px;
       }
 
       .dark {
@@ -64,14 +62,26 @@
       flipside.chart("chart", {
         title: "Bitcoin Health",
         series: [
-          { symbol: "BTC", metric: "fcas", type: "line", yAxis: 0 },
-          { symbol: "BTC", metric: "dev", type: "line", yAxis: 1 }
+          {
+            name: "BTC FCAS",
+            symbol: "BTC",
+            metric: "fcas",
+            type: "line",
+            yAxis: 0
+          },
+          {
+            name: "BTC Dev",
+            symbol: "BTC",
+            metric: "dev",
+            type: "line",
+            yAxis: 1
+          }
         ]
       });
 
       flipside.chart("chart2", {
         mode: "dark",
-        title: "Ethereum Health w/ Custom Colors",
+        title: "Ethereum Health",
         axisTitles: ["FCAS", "Dev"],
         colors: ["#E44C27", "#7FCCC5"],
         series: [

src/api.ts

@@ -91,7 +91,12 @@ export type APISeriesPayload = {
   series: APISeries[];
 };
 
-export type WidgetLinksSlug = "spectrum" | "multi-table" | "table" | "score";
+export type WidgetLinksSlug =
+  | "spectrum"
+  | "multi-table"
+  | "table"
+  | "score"
+  | "chart";
 export type WidgetLinksLink = {
   widget_id: string;
   name: "right_link" | "left_link";

src/chart/defaults.ts

@@ -8,7 +8,10 @@ export const DEFAULT_HIGHCHARTS: Highcharts.Options = {
 
   title: {
     text: undefined,
-    align: "left"
+    align: "left",
+    style: {
+      fontSize: "24px"
+    }
   },
 
   colors: ["#F5A623", "#2D57ED", "#48A748", "#006093", "#5A2788"],
@@ -32,6 +35,72 @@ export const DEFAULT_HIGHCHARTS: Highcharts.Options = {
     labels: { style: { color: "#9B9B9B" } },
     lineColor: "#6c6c6c",
     tickColor: "#6c6c6c"
+  },
+
+  navigator: {
+    enabled: false
+  },
+
+  scrollbar: {
+    enabled: false
+  },
+
+  rangeSelector: {
+    enabled: true,
+    allButtonsEnabled: false,
+    buttonTheme: {
+      fill: "none",
+      stroke: "none",
+      style: {
+        color: "#9B9B9B"
+      },
+      states: {
+        select: {
+          fill: "none",
+          style: {
+            color: "#000",
+            fontWeight: "normal",
+            textDecoration: "underline"
+          }
+        },
+        disabled: {
+          style: {
+            color: "#9B9B9B",
+            opacity: 0.5
+          }
+        }
+      } as any
+    },
+    inputEnabled: false
+  },
+
+  exporting: {
+    enabled: true,
+    buttons: {
+      contextButton: {
+        verticalAlign: "top",
+        x: 0,
+        y: 0,
+
+        color: "#ffffff",
+        symbolFill: "#ffffff",
+        theme: {
+          fill: "transparent",
+          cursor: "pointer",
+          states: { hover: { fill: "transparent", opacity: 0.7 } }
+        },
+        menuItems: [
+          "downloadCSV",
+          "separator",
+          "printChart",
+          "separator",
+          "downloadPNG",
+          "downloadJPEG",
+          "downloadPDF",
+          "downloadSVG"
+        ]
+      }
+    }
   }
 };
 

src/chart/helpers.ts

@@ -43,7 +43,7 @@ export function createSeries(
       .filter(r => r.symbol === s.symbol.toUpperCase())
       .map(r => [Date.parse(r.timestamp as string), r[s.metric]]);
     return {
-      name: s.metric,
+      name: s.name || s.metric,
       yAxis: s.yAxis,
       tooltip: {
         valuePrefix: prefixes[s.metric]

src/chart/index.tsx

@@ -1,10 +1,13 @@
 import { h, Component } from "preact";
-import Highcharts, { SeriesLineOptions } from "highcharts";
+import Highcharts from "highcharts/highstock";
 import merge from "lodash/merge";
 import API from "../api";
 import { createApiSeries, createSeries } from "./helpers";
 import zipObject = require("lodash/zipObject");
 import { DEFAULT_HIGHCHARTS, DEFAULT_YAXIS } from "./defaults";
+import CustomLinks from "../components/customLinks";
+
+require("highcharts/modules/exporting")(Highcharts);
 
 type ChartType = "line" | "bar";
 type ChartAxis = "left" | "right";
@@ -13,6 +16,7 @@ export type ChartSeries = {
   metric: string;
   type: ChartType;
   yAxis?: ChartAxis;
+  name?: string;
 };
 
 export type Props = {
@@ -73,6 +77,18 @@ class Chart extends Component<Props> {
         }
       },
 
+      rangeSelector: {
+        buttonTheme: {
+          states: {
+            select: {
+              style: {
+                color: mode === "dark" ? "#fff" : "#000"
+              }
+            }
+          }
+        }
+      },
+
       xAxis: {
         lineColor: gridLineColor,
         tickColor: gridLineColor
@@ -101,7 +117,12 @@ class Chart extends Component<Props> {
   }
 
   render() {
-    return <div ref={el => (this.container = el)} />;
+    return (
+      <div>
+        <div ref={el => (this.container = el)} />
+        <CustomLinks widget="chart" api={this.props.api} />
+      </div>
+    );
   }
 }
 

src/components/customLinks/index.tsx

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import * as css from "./style.css";
 
 type Props = {
-  widget: "spectrum" | "multi-table" | "table" | "score";
+  widget: "spectrum" | "multi-table" | "table" | "score" | "chart";
   api: API;
   style?: any;
   linkClass?: string;