@oanda/labs-order-book-widget 1.0.62 → 1.0.64

package/dist/module/OrderBookWidget/components/Chart/getOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getOptions.js","names":["chartSharedOptions","ZOOM_BARS","INITIAL_BARS","getOptions","_ref","data","price","bucketWidth","toolbox","itemSize","itemGap","bottom","right","showTitle","iconStyle","borderColor","emphasis","tooltip","show","backgroundColor","formatter","val","title","position","confine","textStyle","color","feature","myZoomIn","icon","icons","zoomInIcon","onclick","model","instance","startValue","endValue","option","dataZoom","halfZoomValue","dispatchAction","type","myZoomOut","zoomOutIcon","myResetZoom","resetZoomIcon","realtime","yAxisIndex","dataset","source","trigger","borderRadius","shadowBlur","shadowOffsetX","shadowOffsetY","shadowColor","params","values","concat","Math","abs","axisPointer","axis","grid","top","left","width","height","graphic","silent","children","z","shape","style","fill","text","yAxis","axisLine","axisTick","splitLine","lineStyle","axisLabel","padding","rich","a","value","index","xAxis","min","max","showMinLabel","showMaxLabel","series","encode","x","y","itemStyle","renderItem","api","yValue","xStart","coord","xEnd","bucketWidthHeight","size","rectShape","markLine","animation","precision","symbol","symbolRotate","symbolSize","label"],"sources":["../../../../../src/OrderBookWidget/components/Chart/getOptions.ts"],"sourcesContent":["import { EChartsOption, Model, EChartsType } from 'echarts';\nimport { chartSharedOptions } from '@oanda/labs-widget-common';\nimport { ZOOM_BARS, INITIAL_BARS } from './constants';\n\nexport const getOptions = (\n  {\n    data,\n    price,\n    bucketWidth,\n  } :\n  {\n    data: number[][],\n    price: number,\n    bucketWidth: number\n  },\n): EChartsOption => (\n  {\n    toolbox: {\n      itemSize: 18,\n      itemGap: 14,\n      bottom: 6,\n      right: 6,\n      showTitle: false,\n      iconStyle: {\n        borderColor: '#00214A',\n      },\n      emphasis: {\n        iconStyle: {\n          borderColor: '#008573',\n        },\n      },\n      tooltip: {\n        show: true,\n        backgroundColor: '#00214A',\n        formatter: (val) => val.title,\n        position: 'top',\n        confine: true,\n        textStyle: {\n          color: '#fff',\n        },\n      },\n      feature: {\n        myZoomIn: {\n          show: true,\n          title: 'Zoom in',\n          icon: chartSharedOptions.icons.zoomInIcon,\n          onclick: (model: Model, instance: EChartsType) => {\n            const { startValue, endValue } = model.option.dataZoom[0];\n            // @todo handle zoom with minimal step\n            const halfZoomValue = 0.5 * ZOOM_BARS * bucketWidth;\n\n            instance.dispatchAction({\n              type: 'dataZoom',\n              startValue: startValue + halfZoomValue,\n              endValue: endValue - halfZoomValue,\n            });\n          },\n        },\n        myZoomOut: {\n          show: true,\n          title: 'Zoom out',\n          icon: chartSharedOptions.icons.zoomOutIcon,\n          onclick: (model: Model, instance: EChartsType) => {\n            const { startValue, endValue } = model.option.dataZoom[0];\n            // @todo handle zoom with full chart range\n            const halfZoomValue = 0.5 * ZOOM_BARS * bucketWidth;\n\n            instance.dispatchAction({\n              type: 'dataZoom',\n              startValue: startValue - halfZoomValue,\n              endValue: endValue + halfZoomValue,\n            });\n          },\n        },\n        myResetZoom: {\n          show: true,\n          title: 'ResetZoom',\n          icon: chartSharedOptions.icons.resetZoomIcon,\n          onclick: (model: Model, instance: EChartsType) => {\n            instance.dispatchAction({\n              type: 'dataZoom',\n              startValue: price - (bucketWidth * INITIAL_BARS * 0.5),\n              endValue: price + (bucketWidth * INITIAL_BARS * 0.5),\n            });\n          },\n        },\n      },\n    },\n    dataZoom: [\n      {\n        type: 'inside',\n        realtime: true,\n        startValue: price - (bucketWidth * INITIAL_BARS * 0.5),\n        endValue: price + (bucketWidth * INITIAL_BARS * 0.5),\n        yAxisIndex: 0,\n        // @todo\n        // minSpan: 2,\n      },\n    ],\n    dataset: {\n      source: data,\n    },\n    textStyle: {\n      // @todo, broken due dark mode\n      // ...chartSharedOptions.textStyle,\n    },\n    tooltip: {\n      trigger: 'axis',\n      borderRadius: 0,\n      shadowBlur: 24,\n      shadowOffsetX: 0,\n      shadowOffsetY: 6,\n      shadowColor: 'rgba(0,0,0,0.1)',\n      textStyle: {\n        // @todo, broken due dark mode\n        // ...chartSharedOptions.textStyle,\n      },\n      formatter: (params) => {\n        const values = (params as { data: number[] }[])[0].data;\n        return `Price: ${values[0]}<br />Buy: ${values[1]}%<br/>Sell: ${Math.abs(values[2])}%`;\n      },\n      axisPointer: {\n        axis: 'y',\n      },\n    },\n    grid: [\n      {\n        top: '1px',\n        left: '1px',\n        right: '121px',\n        bottom: '41px',\n        // @todo, broken due dark mode\n        // borderColor: chartSharedOptions.colors.axis,\n        show: true,\n      },\n      {\n        bottom: '1px',\n        right: '1px',\n        width: '120px',\n        height: '40px',\n        // @todo, broken due dark mode\n        // borderColor: chartSharedOptions.colors.axis,\n        show: true,\n      },\n      {\n        top: '1px',\n        left: '1px',\n        right: '1px',\n        bottom: '1px',\n        // @todo, broken due dark mode\n        // borderColor: chartSharedOptions.colors.axis,\n        show: true,\n      },\n    ],\n    graphic: [\n      {\n        type: 'group',\n        left: '8px',\n        top: '8px',\n        silent: true,\n        children: [\n          {\n            type: 'rect',\n            z: 100,\n            left: 'center',\n            top: 'middle',\n            shape: {\n              width: 60,\n              height: 30,\n            },\n            style: {\n              fill: '#fff',\n              shadowBlur: 8,\n              shadowOffsetX: 0,\n              shadowOffsetY: 1,\n              shadowColor: 'rgba(0,0,0,0.1)',\n            },\n          },\n          {\n            type: 'text',\n            z: 100,\n            left: 'center',\n            top: 'middle',\n            style: {\n              width: 60,\n              height: 30,\n              // @todo\n              text: 'Sell',\n            },\n          },\n        ],\n      },\n      {\n        type: 'group',\n        right: '128px',\n        top: '8px',\n        silent: true,\n        children: [\n          {\n            type: 'rect',\n            z: 100,\n            right: 'center',\n            top: 'middle',\n            shape: {\n              width: 60,\n              height: 30,\n            },\n            style: {\n              fill: '#fff',\n              shadowBlur: 8,\n              shadowOffsetX: 0,\n              shadowOffsetY: 1,\n              shadowColor: 'rgba(0,0,0,0.1)',\n            },\n          },\n          {\n            type: 'text',\n            z: 100,\n            right: 'center',\n            top: 'middle',\n            style: {\n              width: 60,\n              height: 30,\n              // @todo\n              text: 'Buy',\n            },\n          },\n        ],\n      },\n    ],\n    yAxis: {\n      type: 'value',\n      position: 'right',\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: {\n        lineStyle: {\n          // @todo, broken due dark mode\n          // color: chartSharedOptions.colors.axis,\n        },\n      },\n      axisLabel: {\n        padding: [0, 0, 0, 10],\n        rich: {\n          a: {\n            padding: [0, 0, 16, 0],\n          },\n        },\n        // @todo add decimal places\n        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),\n      },\n    },\n    xAxis: {\n      type: 'value',\n      // @todo\n      min: -1.1,\n      max: 1.1,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: {\n        lineStyle: {\n          // @todo, broken due dark mode\n          // color: chartSharedOptions.colors.axis,\n        },\n      },\n      axisLabel: {\n        padding: [7, 0, 0, 0],\n        showMinLabel: false,\n        showMaxLabel: false,\n        formatter: (value) => (value === 0 ? '%' : `${Math.abs(value)}%`),\n      },\n    },\n    series: [\n      {\n        type: 'custom',\n        encode: {\n          x: 1,\n          y: 0,\n          tooltip: 1,\n        },\n        itemStyle: {\n          color: '#00B89E',\n        },\n        renderItem: (params, api) => {\n          const yValue = api.value(0);\n          const xStart = api.coord([api.value(1), yValue]);\n          const xEnd = api.coord([0, yValue]);\n          const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;\n          const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;\n\n          const rectShape = {\n            x: xStart[0] + 0.5,\n            y: xStart[1] - height / 2,\n            width: xEnd[0] - xStart[0],\n            height,\n          };\n\n          return {\n            type: 'rect',\n            shape: rectShape,\n            style: api.style(),\n          };\n        },\n      },\n      {\n        type: 'custom',\n        encode: {\n          x: 1,\n          y: 0,\n          tooltip: 2,\n        },\n        markLine: {\n          animation: false,\n          silent: true,\n          // @todo confirm precision\n          precision: 4,\n          symbol: ['none', 'triangle'],\n          symbolRotate: 90,\n          symbolSize: [20, 10],\n          lineStyle: {\n            color: '#008573',\n            width: 1,\n          },\n          label: {\n            padding: [5, 15, 5, 15],\n            color: '#fff',\n            backgroundColor: '#008573',\n          },\n          data: [\n            {\n              yAxis: price,\n            },\n          ],\n        },\n        itemStyle: {\n          color: '#E5226E',\n        },\n        renderItem: (params, api) => {\n          const yValue = api.value(0);\n          const xStart = api.coord([api.value(2), yValue]);\n          const xEnd = api.coord([0, yValue]);\n          const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;\n          const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;\n\n          const rectShape = {\n            x: xStart[0] - 0.5,\n            y: xStart[1] - height / 2,\n            width: xEnd[0] - xStart[0],\n            height,\n          };\n\n          return {\n            type: 'rect',\n            shape: rectShape,\n            style: api.style(),\n          };\n        },\n      },\n    ],\n  }\n);\n"],"mappings":"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"}

package/dist/types/OrderBookWidget/components/Chart/getOptions.d.ts

@@ -1,6 +0,0 @@
-import { EChartsOption } from 'echarts';
-export declare const getOptions: ({ data, price, bucketWidth, }: {
-    data: number[][];
-    price: number;
-    bucketWidth: number;
-}) => EChartsOption;

package/src/OrderBookWidget/components/Chart/getOptions.ts

@@ -1,361 +0,0 @@
-import { EChartsOption, Model, EChartsType } from 'echarts';
-import { chartSharedOptions } from '@oanda/labs-widget-common';
-import { ZOOM_BARS, INITIAL_BARS } from './constants';
-
-export const getOptions = (
-  {
-    data,
-    price,
-    bucketWidth,
-  } :
-  {
-    data: number[][],
-    price: number,
-    bucketWidth: number
-  },
-): EChartsOption => (
-  {
-    toolbox: {
-      itemSize: 18,
-      itemGap: 14,
-      bottom: 6,
-      right: 6,
-      showTitle: false,
-      iconStyle: {
-        borderColor: '#00214A',
-      },
-      emphasis: {
-        iconStyle: {
-          borderColor: '#008573',
-        },
-      },
-      tooltip: {
-        show: true,
-        backgroundColor: '#00214A',
-        formatter: (val) => val.title,
-        position: 'top',
-        confine: true,
-        textStyle: {
-          color: '#fff',
-        },
-      },
-      feature: {
-        myZoomIn: {
-          show: true,
-          title: 'Zoom in',
-          icon: chartSharedOptions.icons.zoomInIcon,
-          onclick: (model: Model, instance: EChartsType) => {
-            const { startValue, endValue } = model.option.dataZoom[0];
-            // @todo handle zoom with minimal step
-            const halfZoomValue = 0.5 * ZOOM_BARS * bucketWidth;
-
-            instance.dispatchAction({
-              type: 'dataZoom',
-              startValue: startValue + halfZoomValue,
-              endValue: endValue - halfZoomValue,
-            });
-          },
-        },
-        myZoomOut: {
-          show: true,
-          title: 'Zoom out',
-          icon: chartSharedOptions.icons.zoomOutIcon,
-          onclick: (model: Model, instance: EChartsType) => {
-            const { startValue, endValue } = model.option.dataZoom[0];
-            // @todo handle zoom with full chart range
-            const halfZoomValue = 0.5 * ZOOM_BARS * bucketWidth;
-
-            instance.dispatchAction({
-              type: 'dataZoom',
-              startValue: startValue - halfZoomValue,
-              endValue: endValue + halfZoomValue,
-            });
-          },
-        },
-        myResetZoom: {
-          show: true,
-          title: 'ResetZoom',
-          icon: chartSharedOptions.icons.resetZoomIcon,
-          onclick: (model: Model, instance: EChartsType) => {
-            instance.dispatchAction({
-              type: 'dataZoom',
-              startValue: price - (bucketWidth * INITIAL_BARS * 0.5),
-              endValue: price + (bucketWidth * INITIAL_BARS * 0.5),
-            });
-          },
-        },
-      },
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        realtime: true,
-        startValue: price - (bucketWidth * INITIAL_BARS * 0.5),
-        endValue: price + (bucketWidth * INITIAL_BARS * 0.5),
-        yAxisIndex: 0,
-        // @todo
-        // minSpan: 2,
-      },
-    ],
-    dataset: {
-      source: data,
-    },
-    textStyle: {
-      // @todo, broken due dark mode
-      // ...chartSharedOptions.textStyle,
-    },
-    tooltip: {
-      trigger: 'axis',
-      borderRadius: 0,
-      shadowBlur: 24,
-      shadowOffsetX: 0,
-      shadowOffsetY: 6,
-      shadowColor: 'rgba(0,0,0,0.1)',
-      textStyle: {
-        // @todo, broken due dark mode
-        // ...chartSharedOptions.textStyle,
-      },
-      formatter: (params) => {
-        const values = (params as { data: number[] }[])[0].data;
-        return `Price: ${values[0]}<br />Buy: ${values[1]}%<br/>Sell: ${Math.abs(values[2])}%`;
-      },
-      axisPointer: {
-        axis: 'y',
-      },
-    },
-    grid: [
-      {
-        top: '1px',
-        left: '1px',
-        right: '121px',
-        bottom: '41px',
-        // @todo, broken due dark mode
-        // borderColor: chartSharedOptions.colors.axis,
-        show: true,
-      },
-      {
-        bottom: '1px',
-        right: '1px',
-        width: '120px',
-        height: '40px',
-        // @todo, broken due dark mode
-        // borderColor: chartSharedOptions.colors.axis,
-        show: true,
-      },
-      {
-        top: '1px',
-        left: '1px',
-        right: '1px',
-        bottom: '1px',
-        // @todo, broken due dark mode
-        // borderColor: chartSharedOptions.colors.axis,
-        show: true,
-      },
-    ],
-    graphic: [
-      {
-        type: 'group',
-        left: '8px',
-        top: '8px',
-        silent: true,
-        children: [
-          {
-            type: 'rect',
-            z: 100,
-            left: 'center',
-            top: 'middle',
-            shape: {
-              width: 60,
-              height: 30,
-            },
-            style: {
-              fill: '#fff',
-              shadowBlur: 8,
-              shadowOffsetX: 0,
-              shadowOffsetY: 1,
-              shadowColor: 'rgba(0,0,0,0.1)',
-            },
-          },
-          {
-            type: 'text',
-            z: 100,
-            left: 'center',
-            top: 'middle',
-            style: {
-              width: 60,
-              height: 30,
-              // @todo
-              text: 'Sell',
-            },
-          },
-        ],
-      },
-      {
-        type: 'group',
-        right: '128px',
-        top: '8px',
-        silent: true,
-        children: [
-          {
-            type: 'rect',
-            z: 100,
-            right: 'center',
-            top: 'middle',
-            shape: {
-              width: 60,
-              height: 30,
-            },
-            style: {
-              fill: '#fff',
-              shadowBlur: 8,
-              shadowOffsetX: 0,
-              shadowOffsetY: 1,
-              shadowColor: 'rgba(0,0,0,0.1)',
-            },
-          },
-          {
-            type: 'text',
-            z: 100,
-            right: 'center',
-            top: 'middle',
-            style: {
-              width: 60,
-              height: 30,
-              // @todo
-              text: 'Buy',
-            },
-          },
-        ],
-      },
-    ],
-    yAxis: {
-      type: 'value',
-      position: 'right',
-      axisLine: { show: false },
-      axisTick: { show: false },
-      splitLine: {
-        lineStyle: {
-          // @todo, broken due dark mode
-          // color: chartSharedOptions.colors.axis,
-        },
-      },
-      axisLabel: {
-        padding: [0, 0, 0, 10],
-        rich: {
-          a: {
-            padding: [0, 0, 16, 0],
-          },
-        },
-        // @todo add decimal places
-        formatter: (value, index) => (index ? `${value}` : `{a|${value}}`),
-      },
-    },
-    xAxis: {
-      type: 'value',
-      // @todo
-      min: -1.1,
-      max: 1.1,
-      axisLine: { show: false },
-      axisTick: { show: false },
-      splitLine: {
-        lineStyle: {
-          // @todo, broken due dark mode
-          // color: chartSharedOptions.colors.axis,
-        },
-      },
-      axisLabel: {
-        padding: [7, 0, 0, 0],
-        showMinLabel: false,
-        showMaxLabel: false,
-        formatter: (value) => (value === 0 ? '%' : `${Math.abs(value)}%`),
-      },
-    },
-    series: [
-      {
-        type: 'custom',
-        encode: {
-          x: 1,
-          y: 0,
-          tooltip: 1,
-        },
-        itemStyle: {
-          color: '#00B89E',
-        },
-        renderItem: (params, api) => {
-          const yValue = api.value(0);
-          const xStart = api.coord([api.value(1), yValue]);
-          const xEnd = api.coord([0, yValue]);
-          const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;
-          const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;
-
-          const rectShape = {
-            x: xStart[0] + 0.5,
-            y: xStart[1] - height / 2,
-            width: xEnd[0] - xStart[0],
-            height,
-          };
-
-          return {
-            type: 'rect',
-            shape: rectShape,
-            style: api.style(),
-          };
-        },
-      },
-      {
-        type: 'custom',
-        encode: {
-          x: 1,
-          y: 0,
-          tooltip: 2,
-        },
-        markLine: {
-          animation: false,
-          silent: true,
-          // @todo confirm precision
-          precision: 4,
-          symbol: ['none', 'triangle'],
-          symbolRotate: 90,
-          symbolSize: [20, 10],
-          lineStyle: {
-            color: '#008573',
-            width: 1,
-          },
-          label: {
-            padding: [5, 15, 5, 15],
-            color: '#fff',
-            backgroundColor: '#008573',
-          },
-          data: [
-            {
-              yAxis: price,
-            },
-          ],
-        },
-        itemStyle: {
-          color: '#E5226E',
-        },
-        renderItem: (params, api) => {
-          const yValue = api.value(0);
-          const xStart = api.coord([api.value(2), yValue]);
-          const xEnd = api.coord([0, yValue]);
-          const bucketWidthHeight = api.size ? (api.size([0, bucketWidth]) as number[])[1] : 0;
-          const height = bucketWidthHeight > 4 ? bucketWidthHeight * 0.8 : bucketWidthHeight;
-
-          const rectShape = {
-            x: xStart[0] - 0.5,
-            y: xStart[1] - height / 2,
-            width: xEnd[0] - xStart[0],
-            height,
-          };
-
-          return {
-            type: 'rect',
-            shape: rectShape,
-            style: api.style(),
-          };
-        },
-      },
-    ],
-  }
-);