flipside-js/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>flipside.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="flipside-v1.16.1.js"></script>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";
        padding: 0;
        margin: 0;
        background-color: #fff !important;
      }

      text {
        font-weight: 700;
        font-size: 24px;
      }

      .wrapper {
        width: 1080px;
        height: 800px;
        font-weight: 700;
        font-size: 20px;
      }
      .frameWidget {
        width: 100%;
        height: 100%;
      }

      .wrapper p {
        font-size: 40px;
      }

      #widget-1 {
        background: black;
      }
      #widget-2 {
        width: 300px;
        background: #33435e;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h3>Frame</h3>
      <div id="frame-widget" class="frameWidget"></div>
    </div>
    <div class="wrapper">
      <h3>Dynamic</h3>
      <div id="widget"></div>
    </div>

    <div class="wrapper">
      <h2>Chart</h2>
      <div id="chart"></div>
    </div>

    <div class="wrapper dark" style="background-color: #000000">
      <div id="chart2"></div>
    </div>

    <div class="wrapper"><div id="score"></div></div>

    <div class="wrapper"><div id="widget-0" style="width: 289px"></div></div>

    <div class="wrapper" style="background-color: #000000">
      <div id="widget-1" style="width: 289px"></div>
    </div>

    <div class="wrapper" style="background-color: #33435e">
      <div id="widget-2"></div>
    </div>

    <div class="wrapper"><div id="multiTable"></div></div>
    <div class="wrapper">
      <div id="multiTableFcas"></div>
    </div>

    <script>
      const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");

      flipside.frame("frame-widget", {
        url:
          "https://velocity.flipsidecrypto.com/public/question/3964591d-a657-4432-b3e8-8675bfbfb714",
      });

      flipside.dynamic("widget", {
        widgetId: "578375af-3467-4742-9863-5ca6f2fa30d1",
        darkMode: false,
        data: {
          asset_id: 1,
        },
      });

      flipside.dynamic("widget", {
        widgetId: "26dd8193-b061-4ef5-a49d-b7bf3c282853",
        darkMode: false,
        data: {
          asset_id: 1,
          metric: "fcas",
          symbol: "BTC",
          title: "BTC FCAS",
        },
      });
      flipside.chart("chart", {
        title: "Flipside 25 - Overall Industry Health",
        chart: {
          type: "area",
        },
        plotOptions: {
          area: {
            threshold: null,
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1,
              },
              stops: [
                [0, "#9EC9FE"],
                [1, "rgba(255, 255, 255, 0)"],
              ],
            },
          },
        },
        series: [
          {
            name: "FLIP25",
            symbol: "FLIP25",
            metric: "fcas",
            type: "line",
            yAxis: 1,
          },
        ],
        colors: ["#9EC9FE"],
        rangeSelector: {
          enabled: true,
        },
      });

      flipside.chart("chart2", {
        mode: "light",
        title: "Ethereum Health",
        axisTitles: ["FCAS", "Dev"],
        colors: ["#E44C27", "#7FCCC5"],
        series: [
          { asset_id: 2, metric: "fcas", type: "line", yAxis: 0 },
          { asset_id: 2, metric: "dev", type: "line", yAxis: 1 },
        ],
      });

      flipside.spectrum("widget-0", {
        asset: {
          asset_id: 1,
          highlights: ["BTC", "ETH", "QTUM"],
        },
        mode: "light",
        fontFamily: "inherit",
        relatedMarkers: {
          enabled: true,
          bucketDistance: 35,
          lineDistance: 25,
          fontFamily: "inherit",
        },
        showHeader: false,
        name: { enabled: true, style: {} },
        spectrum: { enabled: true },
        icon: { enabled: true },
        rank: { enabled: true },
        trend: { enabled: true },
      });

      flipside.spectrum("widget-1", {
        assets: [
          {
            asset_id: 1,
            highlights: ["BTC", "NMR", "QTUM"],
          },
          {
            asset_id: 2,
            highlights: ["BTC", "NMR", "QTUM"],
          },
        ],
        mode: "dark",
        bucketDistance: 100,
        showHeader: false,
        relatedMarkers: {
          bucketDistance: 55,
          lineDistance: 35,
        },
      });

      flipside.createTable("widget-2", "btc", {
        dark: true,
        borderColor: "#737e8d",
      });

      // Price table
      flipside.multiTable("multiTable", {
        widgetType: "price-multi-table",
        columns: ["market_cap", "price", "volume_24h"],
        sortBy: "market_cap",
        showFullName: true,
        fontFamily: "inherit",
        limit: 50,
        mode: "light",
        headers: {
          style: {
            fontWeight: "bold",
            padding: "10px 0 10px 0",
          },
        },
        rows: {
          dividers: true,
          dividersColor: "#eaeaea",
          alternating: false,
          style: {
            padding: "10px 0 10px 0",
          },
        },
        title: {
          text: "Top 50 Coins By Market Cap",
          style: { fontSize: "24px", fontWeight: 400 },
        },
      });

      // FCAS
      flipside.multiTable("multiTableFcas", {
        autoWidth: false,
        assets: null,
        columns: [
          "fcas",
          "trend",
          "userActivity",
          "developerBehavior",
          "marketMaturity",
          "rank",
        ],
        exlusions: null,
        fontFamily: "inherit",
        headers: {},
        limit: 10,
        mode: "light",
        rows: {
          alternating: true,
          alternatingColors: "#eeeeee",
          dividers: false,
        },
        title: {
          text: "Top Coins",
          style: {},
        },
        trend: {
          enabled: true,
          changeOver: 14,
          style: {},
        },
      });

      flipside.score("score", { symbol: "eth" });
    </script>
  </body>
</html>
First commit. 2018-11-30 21:53:43 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset="utf-8" />`
			`<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
			`<title>flipside.js</title>`
			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
v1.16.1 2020-09-30 21:25:50 +00:00			`<script src="flipside-v1.16.1.js"></script>`
First commit. 2018-11-30 21:53:43 +00:00			`<style>`
updated plot to be dynamic width, added option to hide header 2019-01-17 05:04:40 +00:00			`body {`
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00			`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,`
			`Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",`
			`"Segoe UI Symbol";`
updated plot to be dynamic width, added option to hide header 2019-01-17 05:04:40 +00:00			`padding: 0;`
			`margin: 0;`
Add parameter to dynamic widget and remove . 2020-08-13 14:58:58 +00:00			`background-color: #fff !important;`
updated plot to be dynamic width, added option to hide header 2019-01-17 05:04:40 +00:00			`}`
force spectrum font sizing 2019-02-23 00:00:07 +00:00
			`text {`
			`font-weight: 700;`
			`font-size: 24px;`
			`}`

First commit. 2018-11-30 21:53:43 +00:00			`.wrapper {`
Add showHeader option to spectrum widget 2020-05-13 18:03:41 +00:00			`width: 1080px;`
Add frame widget. 2020-08-14 01:40:35 +00:00			`height: 800px;`
force spectrum font sizing 2019-02-23 00:00:07 +00:00			`font-weight: 700;`
			`font-size: 20px;`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00			`}`
Add frame widget. 2020-08-14 01:40:35 +00:00			`.frameWidget {`
			`width: 100%;`
			`height: 100%;`
			`}`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00
added css modules, cleanup, finishe score widget 2019-02-05 23:07:39 +00:00			`.wrapper p {`
			`font-size: 40px;`
			`}`

Update styles on table widget. 2019-01-18 15:20:32 +00:00			`#widget-1 {`
update mini styling, add table widget 2019-01-17 07:13:37 +00:00			`background: black;`
			`}`
Update styles on table widget. 2019-01-18 15:20:32 +00:00			`#widget-2 {`
			`width: 300px;`
			`background: #33435e;`
			`}`
First commit. 2018-11-30 21:53:43 +00:00			`</style>`
			`</head>`
			`<body>`
Add frame widget. 2020-08-14 01:40:35 +00:00			`<div class="wrapper">`
			`<h3>Frame</h3>`
			`<div id="frame-widget" class="frameWidget"></div>`
			`</div>`
Update asset interface of dynamic widget. 2020-03-04 17:05:47 +00:00			`<div class="wrapper">`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`<h3>Dynamic</h3>`
Update asset interface of dynamic widget. 2020-03-04 17:05:47 +00:00			`<div id="widget"></div>`
			`</div>`

Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`<div class="wrapper">`
			`<h2>Chart</h2>`
			`<div id="chart"></div>`
			`</div>`
allow lodash function import with es6 syntax, start chart widget 2019-02-14 09:28:47 +00:00
v1.16.1 2020-09-30 21:25:50 +00:00			`<div class="wrapper dark" style="background-color: #000000">`
fix svg text sizing on chart 2019-03-01 07:04:45 +00:00			`<div id="chart2"></div>`
			`</div>`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00
added withFcas HOC, started Score component 2019-02-05 10:33:29 +00:00			`<div class="wrapper"><div id="score"></div></div>`

v1.16.1 2020-09-30 21:25:50 +00:00			`<div class="wrapper"><div id="widget-0" style="width: 289px"></div></div>`
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00
v1.16.1 2020-09-30 21:25:50 +00:00			`<div class="wrapper" style="background-color: #000000">`
			`<div id="widget-1" style="width: 289px"></div>`
Update index.html 2019-01-28 22:23:52 +00:00			`</div>`
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00
v1.16.1 2020-09-30 21:25:50 +00:00			`<div class="wrapper" style="background-color: #33435e">`
Update index.html 2019-01-28 22:23:52 +00:00			`<div id="widget-2"></div>`
			`</div>`
updated plot to be dynamic width, added option to hide header 2019-01-17 05:04:40 +00:00
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00			`<div class="wrapper"><div id="multiTable"></div></div>`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`<div class="wrapper">`
			`<div id="multiTableFcas"></div>`
			`</div>`
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00
First commit. 2018-11-30 21:53:43 +00:00			`<script>`
Update asset interface of dynamic widget. 2020-03-04 17:05:47 +00:00			`const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");`
Add dynamic widget 2020-02-26 18:29:21 +00:00
Add frame widget. 2020-08-14 01:40:35 +00:00			`flipside.frame("frame-widget", {`
			`url:`
			`"https://velocity.flipsidecrypto.com/public/question/3964591d-a657-4432-b3e8-8675bfbfb714",`
			`});`

Add dynamic widget 2020-02-26 18:29:21 +00:00			`flipside.dynamic("widget", {`
Update asset interface of dynamic widget. 2020-03-04 17:05:47 +00:00			`widgetId: "578375af-3467-4742-9863-5ca6f2fa30d1",`
Add parameter to dynamic widget and remove . 2020-08-13 14:58:58 +00:00			`darkMode: false,`
			`data: {`
			`asset_id: 1,`
			`},`
			`});`

			`flipside.dynamic("widget", {`
			`widgetId: "26dd8193-b061-4ef5-a49d-b7bf3c282853",`
			`darkMode: false,`
			`data: {`
			`asset_id: 1,`
			`metric: "fcas",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`symbol: "BTC",`
Add parameter to dynamic widget and remove . 2020-08-13 14:58:58 +00:00			`title: "BTC FCAS",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`},`
Add dynamic widget 2020-02-26 18:29:21 +00:00			`});`
allow lodash function import with es6 syntax, start chart widget 2019-02-14 09:28:47 +00:00			`flipside.chart("chart", {`
Fix dual highcharts import issue. 2019-03-13 19:18:16 +00:00			`title: "Flipside 25 - Overall Industry Health",`
Update requests. 2019-03-15 18:40:53 +00:00			`chart: {`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`type: "area",`
Update requests. 2019-03-15 18:40:53 +00:00			`},`
			`plotOptions: {`
			`area: {`
			`threshold: null,`
			`fillColor: {`
			`linearGradient: {`
			`x1: 0,`
			`y1: 0,`
			`x2: 0,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`y2: 1,`
Update requests. 2019-03-15 18:40:53 +00:00			`},`
Add dynamic widget 2020-02-26 18:29:21 +00:00			`stops: [`
			`[0, "#9EC9FE"],`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`[1, "rgba(255, 255, 255, 0)"],`
			`],`
			`},`
			`},`
Update requests. 2019-03-15 18:40:53 +00:00			`},`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00			`series: [`
export chart, range selector, naming series, customLinks on chart 2019-02-18 08:41:37 +00:00			`{`
Fix dual highcharts import issue. 2019-03-13 19:18:16 +00:00			`name: "FLIP25",`
			`symbol: "FLIP25",`
export chart, range selector, naming series, customLinks on chart 2019-02-18 08:41:37 +00:00			`metric: "fcas",`
			`type: "line",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`yAxis: 1,`
			`},`
allow highcharts config in chart widget 2019-02-18 21:14:29 +00:00			`],`
Update requests. 2019-03-15 18:40:53 +00:00			`colors: ["#9EC9FE"],`
allow highcharts config in chart widget 2019-02-18 21:14:29 +00:00			`rangeSelector: {`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`enabled: true,`
			`},`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00			`});`

			`flipside.chart("chart2", {`
Add parameter to dynamic widget and remove . 2020-08-13 14:58:58 +00:00			`mode: "light",`
export chart, range selector, naming series, customLinks on chart 2019-02-18 08:41:37 +00:00			`title: "Ethereum Health",`
first pass at a linechart widget 2019-02-16 10:53:29 +00:00			`axisTitles: ["FCAS", "Dev"],`
			`colors: ["#E44C27", "#7FCCC5"],`
allow lodash function import with es6 syntax, start chart widget 2019-02-14 09:28:47 +00:00			`series: [`
add asset_ids to chart, add nodata messaging 2019-03-14 02:56:52 +00:00			`{ asset_id: 2, metric: "fcas", type: "line", yAxis: 0 },`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`{ asset_id: 2, metric: "dev", type: "line", yAxis: 1 },`
			`],`
allow lodash function import with es6 syntax, start chart widget 2019-02-14 09:28:47 +00:00			`});`

Update index. 2019-01-29 16:25:59 +00:00			`flipside.spectrum("widget-0", {`
Upgrade to 1.7 and add carousel config feature. 2019-01-29 16:17:36 +00:00			`asset: {`
add asset_ids to chart, add nodata messaging 2019-03-14 02:56:52 +00:00			`asset_id: 1,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`highlights: ["BTC", "ETH", "QTUM"],`
Upgrade to 1.7 and add carousel config feature. 2019-01-29 16:17:36 +00:00			`},`
Spectrum updates. 2019-01-29 15:56:45 +00:00			`mode: "light",`
			`fontFamily: "inherit",`
			`relatedMarkers: {`
			`enabled: true,`
			`bucketDistance: 35,`
			`lineDistance: 25,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`fontFamily: "inherit",`
Spectrum updates. 2019-01-29 15:56:45 +00:00			`},`
Add showHeader option to spectrum widget 2020-05-13 18:03:41 +00:00			`showHeader: false,`
Spectrum updates. 2019-01-29 15:56:45 +00:00			`name: { enabled: true, style: {} },`
			`spectrum: { enabled: true },`
			`icon: { enabled: true },`
			`rank: { enabled: true },`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`trend: { enabled: true },`
Update example. 2019-01-22 00:19:45 +00:00			`});`
new config for spectrum widget 2019-01-28 20:40:52 +00:00
carousel spectrum 2019-01-30 09:24:46 +00:00			`flipside.spectrum("widget-1", {`
			`assets: [`
			`{`
add asset_ids to chart, add nodata messaging 2019-03-14 02:56:52 +00:00			`asset_id: 1,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`highlights: ["BTC", "NMR", "QTUM"],`
carousel spectrum 2019-01-30 09:24:46 +00:00			`},`
			`{`
add asset_ids to chart, add nodata messaging 2019-03-14 02:56:52 +00:00			`asset_id: 2,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`highlights: ["BTC", "NMR", "QTUM"],`
			`},`
carousel spectrum 2019-01-30 09:24:46 +00:00			`],`
new config for spectrum widget 2019-01-28 20:40:52 +00:00			`mode: "dark",`
Fix distance 2019-01-22 00:19:08 +00:00			`bucketDistance: 100,`
Add showHeader option to spectrum widget 2020-05-13 18:03:41 +00:00			`showHeader: false,`
update config fields for rows and others. added default props 2019-01-31 10:52:38 +00:00			`relatedMarkers: {`
Update examples. 2019-02-11 13:51:01 +00:00			`bucketDistance: 55,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`lineDistance: 35,`
			`},`
add dark and mini render options 2018-12-23 06:55:10 +00:00			`});`
new config for spectrum widget 2019-01-28 20:40:52 +00:00
Update styles on table widget. 2019-01-18 15:20:32 +00:00			`flipside.createTable("widget-2", "btc", {`
			`dark: true,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`borderColor: "#737e8d",`
Update styles on table widget. 2019-01-18 15:20:32 +00:00			`});`
added typescript and started multitable widget 2019-01-28 08:32:45 +00:00
CMC updates 2019-03-12 14:09:00 +00:00			`// Price table`
styling on multitable, split rank and trend components, local sorting 2019-01-29 03:28:33 +00:00			`flipside.multiTable("multiTable", {`
Fix example. 2019-03-12 15:14:47 +00:00			`widgetType: "price-multi-table",`
CMC updates 2019-03-12 14:09:00 +00:00			`columns: ["market_cap", "price", "volume_24h"],`
			`sortBy: "market_cap",`
added volume, price, and market cap data and api polling to multi-table 2019-03-08 21:39:25 +00:00			`showFullName: true,`
Update config. 2019-01-29 15:36:34 +00:00			`fontFamily: "inherit",`
CMC updates 2019-03-12 14:09:00 +00:00			`limit: 50,`
Update config. 2019-01-29 15:36:34 +00:00			`mode: "light",`
Add ability to customize row and header style attribute on multi-table widget. 2019-03-12 15:13:19 +00:00			`headers: {`
			`style: {`
			`fontWeight: "bold",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`padding: "10px 0 10px 0",`
			`},`
Add ability to customize row and header style attribute on multi-table widget. 2019-03-12 15:13:19 +00:00			`},`
Update config. 2019-01-29 15:36:34 +00:00			`rows: {`
CMC updates 2019-03-12 14:09:00 +00:00			`dividers: true,`
			`dividersColor: "#eaeaea",`
			`alternating: false,`
Add ability to customize row and header style attribute on multi-table widget. 2019-03-12 15:13:19 +00:00			`style: {`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`padding: "10px 0 10px 0",`
			`},`
Update config. 2019-01-29 15:36:34 +00:00			`},`
			`title: {`
CMC updates 2019-03-12 14:09:00 +00:00			`text: "Top 50 Coins By Market Cap",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`style: { fontSize: "24px", fontWeight: 400 },`
			`},`
styling on multitable, split rank and trend components, local sorting 2019-01-29 03:28:33 +00:00			`});`
added withFcas HOC, started Score component 2019-02-05 10:33:29 +00:00
Update price table. 2019-03-12 14:48:16 +00:00			`// FCAS`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`flipside.multiTable("multiTableFcas", {`
			`autoWidth: false,`
			`assets: null,`
			`columns: [`
			`"fcas",`
			`"trend",`
			`"userActivity",`
			`"developerBehavior",`
			`"marketMaturity",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`"rank",`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`],`
			`exlusions: null,`
Update config. 2019-01-29 15:36:34 +00:00			`fontFamily: "inherit",`
			`headers: {},`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`limit: 10,`
Update config. 2019-01-29 15:36:34 +00:00			`mode: "light",`
			`rows: {`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`alternating: true,`
			`alternatingColors: "#eeeeee",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`dividers: false,`
Update config. 2019-01-29 15:36:34 +00:00			`},`
			`title: {`
			`text: "Top Coins",`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`style: {},`
Update config. 2019-01-29 15:36:34 +00:00			`},`
			`trend: {`
Fixes for broken side-effects :( 2019-03-12 14:42:02 +00:00			`enabled: true,`
Add dynamic widget 2020-02-26 18:29:21 +00:00			`changeOver: 14,`
Add dark mode to dynamic widget 2020-04-14 17:42:44 +00:00			`style: {},`
			`},`
styling on multitable, split rank and trend components, local sorting 2019-01-29 03:28:33 +00:00			`});`
added withFcas HOC, started Score component 2019-02-05 10:33:29 +00:00
			`flipside.score("score", { symbol: "eth" });`
First commit. 2018-11-30 21:53:43 +00:00			`</script>`
			`</body>`
			`</html>`