@oanda/labs-instruments-price-chart-widget 1.0.48 → 1.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +313 -2641
- package/dist/module/InstrumentsPriceChartWidget/InstrumentsPriceChartWidget.js +19 -12
- package/dist/module/InstrumentsPriceChartWidget/InstrumentsPriceChartWidget.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/Main.js +32 -25
- package/dist/module/InstrumentsPriceChartWidget/Main.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/Chart.js +27 -18
- package/dist/module/InstrumentsPriceChartWidget/components/Chart.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/TimeZoneLabel.js +13 -5
- package/dist/module/InstrumentsPriceChartWidget/components/TimeZoneLabel.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/constants.js +11 -5
- package/dist/module/InstrumentsPriceChartWidget/components/constants.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/formatters.js +20 -11
- package/dist/module/InstrumentsPriceChartWidget/components/formatters.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/getOption.js +28 -21
- package/dist/module/InstrumentsPriceChartWidget/components/getOption.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/components/types.js +5 -1
- package/dist/module/InstrumentsPriceChartWidget/config.js +19 -14
- package/dist/module/InstrumentsPriceChartWidget/config.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/index.js +27 -2
- package/dist/module/InstrumentsPriceChartWidget/index.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/render.js +14 -11
- package/dist/module/InstrumentsPriceChartWidget/render.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/types.js +13 -7
- package/dist/module/InstrumentsPriceChartWidget/types.js.map +1 -1
- package/dist/module/InstrumentsPriceChartWidget/utils.js +11 -3
- package/dist/module/InstrumentsPriceChartWidget/utils.js.map +1 -1
- package/dist/module/gql/priceCandles.js +8 -3
- package/dist/module/gql/priceCandles.js.map +1 -1
- package/dist/module/gql/types/fragment-masking.js +11 -3
- package/dist/module/gql/types/fragment-masking.js.map +1 -1
- package/dist/module/gql/types/gql.js +9 -2
- package/dist/module/gql/types/gql.js.map +1 -1
- package/dist/module/gql/types/graphql.js +26 -20
- package/dist/module/gql/types/graphql.js.map +1 -1
- package/dist/module/gql/types/index.js +27 -2
- package/dist/module/gql/types/index.js.map +1 -1
- package/dist/module/gql/validateInstruments.js +8 -2
- package/dist/module/gql/validateInstruments.js.map +1 -1
- package/dist/module/index.js +16 -1
- package/dist/module/index.js.map +1 -1
- package/dist/module/translations/index.js +21 -14
- package/dist/module/translations/index.js.map +1 -1
- package/dist/module/translations/translations.js +7 -1
- package/dist/module/translations/translations.js.map +1 -1
- package/dist/types/gql/priceCandles.d.ts +1 -1
- package/dist/types/gql/validateInstruments.d.ts +1 -1
- package/package.json +8 -4
- package/tsconfig.types.json +2 -4
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.InstrumentsPriceChartWidget = void 0;
|
|
7
|
+
var _client = require("@apollo/client");
|
|
8
|
+
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _translations = require("../translations");
|
|
11
|
+
var _Main = require("./Main");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
13
|
const InstrumentsPriceChartWidget = _ref => {
|
|
7
14
|
let {
|
|
8
15
|
graphqlUrl,
|
|
@@ -14,24 +21,24 @@ const InstrumentsPriceChartWidget = _ref => {
|
|
|
14
21
|
instrument,
|
|
15
22
|
dataSource
|
|
16
23
|
} = _ref;
|
|
17
|
-
const client = new ApolloClient({
|
|
24
|
+
const client = new _client.ApolloClient({
|
|
18
25
|
uri: graphqlUrl,
|
|
19
|
-
cache: new InMemoryCache()
|
|
26
|
+
cache: new _client.InMemoryCache()
|
|
20
27
|
});
|
|
21
|
-
return
|
|
28
|
+
return _react.default.createElement(_labsWidgetCommon.WidgetProvider, {
|
|
22
29
|
client: client,
|
|
23
30
|
locale: locale,
|
|
24
31
|
theme: theme,
|
|
25
|
-
translations: translations
|
|
26
|
-
},
|
|
32
|
+
translations: _translations.translations
|
|
33
|
+
}, _react.default.createElement(_labsWidgetCommon.WidgetWrapper, {
|
|
27
34
|
isParamError: isParamError,
|
|
28
35
|
linkArea: "logo",
|
|
29
36
|
logoLink: logoLink
|
|
30
|
-
},
|
|
37
|
+
}, _react.default.createElement(_Main.Main, {
|
|
31
38
|
dataSource: dataSource,
|
|
32
39
|
division: division,
|
|
33
40
|
instrument: instrument
|
|
34
41
|
})));
|
|
35
42
|
};
|
|
36
|
-
|
|
43
|
+
exports.InstrumentsPriceChartWidget = InstrumentsPriceChartWidget;
|
|
37
44
|
//# sourceMappingURL=InstrumentsPriceChartWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstrumentsPriceChartWidget.js","names":["
|
|
1
|
+
{"version":3,"file":"InstrumentsPriceChartWidget.js","names":["_client","require","_labsWidgetCommon","_react","_interopRequireDefault","_translations","_Main","e","__esModule","default","InstrumentsPriceChartWidget","_ref","graphqlUrl","locale","theme","isParamError","logoLink","division","instrument","dataSource","client","ApolloClient","uri","cache","InMemoryCache","createElement","WidgetProvider","translations","WidgetWrapper","linkArea","Main","exports"],"sources":["../../../src/InstrumentsPriceChartWidget/InstrumentsPriceChartWidget.tsx"],"sourcesContent":["import { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { translations } from '../translations';\nimport { Main } from './Main';\nimport type { InstrumentsPriceChartConfig } from './types';\n\nconst InstrumentsPriceChartWidget = ({\n graphqlUrl,\n locale,\n theme,\n isParamError,\n logoLink,\n division,\n instrument,\n dataSource,\n}: InstrumentsPriceChartConfig) => {\n const client = new ApolloClient({\n uri: graphqlUrl,\n cache: new InMemoryCache(),\n });\n\n return (\n <WidgetProvider\n client={client}\n locale={locale}\n theme={theme}\n translations={translations}\n >\n <WidgetWrapper\n isParamError={isParamError}\n linkArea=\"logo\"\n logoLink={logoLink}\n >\n <Main\n dataSource={dataSource}\n division={division}\n instrument={instrument}\n />\n </WidgetWrapper>\n </WidgetProvider>\n );\n};\n\nexport { InstrumentsPriceChartWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAA8B,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG9B,MAAMG,2BAA2B,GAAGC,IAAA,IASD;EAAA,IATE;IACnCC,UAAU;IACVC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC;EAC2B,CAAC,GAAAR,IAAA;EAC5B,MAAMS,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEV,UAAU;IACfW,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACErB,MAAA,CAAAM,OAAA,CAAAgB,aAAA,CAACvB,iBAAA,CAAAwB,cAAc;IACbN,MAAM,EAAEA,MAAO;IACfP,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA,KAAM;IACba,YAAY,EAAEA;EAAa,GAE3BxB,MAAA,CAAAM,OAAA,CAAAgB,aAAA,CAACvB,iBAAA,CAAA0B,aAAa;IACZb,YAAY,EAAEA,YAAa;IAC3Bc,QAAQ,EAAC,MAAM;IACfb,QAAQ,EAAEA;EAAS,GAEnBb,MAAA,CAAAM,OAAA,CAAAgB,aAAA,CAACnB,KAAA,CAAAwB,IAAI;IACHX,UAAU,EAAEA,UAAW;IACvBF,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA;EAAW,CACxB,CACY,CACD,CAAC;AAErB,CAAC;AAACa,OAAA,CAAArB,2BAAA,GAAAA,2BAAA","ignoreList":[]}
|
|
@@ -1,55 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Main = void 0;
|
|
7
|
+
var _client = require("@apollo/client");
|
|
8
|
+
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _priceCandles = require("../gql/priceCandles");
|
|
11
|
+
var _graphql = require("../gql/types/graphql");
|
|
12
|
+
var _Chart = require("./components/Chart");
|
|
13
|
+
var _TimeZoneLabel = require("./components/TimeZoneLabel");
|
|
14
|
+
var _config = require("./config");
|
|
15
|
+
var _utils = require("./utils");
|
|
16
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
17
|
const Main = _ref => {
|
|
11
18
|
let {
|
|
12
19
|
division,
|
|
13
20
|
instrument,
|
|
14
21
|
dataSource
|
|
15
22
|
} = _ref;
|
|
16
|
-
const [selectedTimeUnit, setSelectedTimeUnit] = useState(TimeSpan.Day_1);
|
|
23
|
+
const [selectedTimeUnit, setSelectedTimeUnit] = (0, _react.useState)(_graphql.TimeSpan.Day_1);
|
|
17
24
|
const {
|
|
18
25
|
loading,
|
|
19
26
|
data,
|
|
20
27
|
error
|
|
21
|
-
} = useQuery(priceCandles, {
|
|
28
|
+
} = (0, _client.useQuery)(_priceCandles.priceCandles, {
|
|
22
29
|
variables: {
|
|
23
30
|
dataSource,
|
|
24
31
|
division,
|
|
25
32
|
instrument,
|
|
26
|
-
granularity: getGranularityForTimeSpan(selectedTimeUnit),
|
|
33
|
+
granularity: (0, _utils.getGranularityForTimeSpan)(selectedTimeUnit),
|
|
27
34
|
timeSpan: selectedTimeUnit
|
|
28
35
|
},
|
|
29
36
|
fetchPolicy: 'cache-and-network'
|
|
30
37
|
});
|
|
31
|
-
const candles = getCandles(data);
|
|
38
|
+
const candles = (0, _utils.getCandles)(data);
|
|
32
39
|
const showError = candles?.length === 0 || !candles || !!error;
|
|
33
|
-
return
|
|
40
|
+
return _react.default.createElement("div", {
|
|
34
41
|
"data-testid": "instruments-price-chart-wrapper"
|
|
35
|
-
},
|
|
42
|
+
}, _react.default.createElement("div", {
|
|
36
43
|
className: "lw-flex lw-pt-2"
|
|
37
|
-
},
|
|
44
|
+
}, _react.default.createElement(_labsWidgetCommon.TimeUnitSwitch, {
|
|
38
45
|
callback: setSelectedTimeUnit,
|
|
39
|
-
options: timeUnitConfig,
|
|
46
|
+
options: _config.timeUnitConfig,
|
|
40
47
|
selected: selectedTimeUnit
|
|
41
|
-
})), loading &&
|
|
48
|
+
})), loading && _react.default.createElement("div", {
|
|
42
49
|
className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
43
|
-
},
|
|
44
|
-
size: SpinnerSize.lg
|
|
45
|
-
})), !loading && showError &&
|
|
50
|
+
}, _react.default.createElement(_labsWidgetCommon.Spinner, {
|
|
51
|
+
size: _labsWidgetCommon.SpinnerSize.lg
|
|
52
|
+
})), !loading && showError && _react.default.createElement("div", {
|
|
46
53
|
className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
|
|
47
|
-
},
|
|
54
|
+
}, _react.default.createElement(_labsWidgetCommon.ChartError, null)), !loading && !showError && _react.default.createElement("div", {
|
|
48
55
|
"data-testid": "instruments-price-chart-widget"
|
|
49
|
-
},
|
|
56
|
+
}, _react.default.createElement(_Chart.Chart, {
|
|
50
57
|
timeSpan: selectedTimeUnit,
|
|
51
58
|
values: candles
|
|
52
|
-
})),
|
|
59
|
+
})), _react.default.createElement(_TimeZoneLabel.TimeZoneLabel, null));
|
|
53
60
|
};
|
|
54
|
-
|
|
61
|
+
exports.Main = Main;
|
|
55
62
|
//# sourceMappingURL=Main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.js","names":["
|
|
1
|
+
{"version":3,"file":"Main.js","names":["_client","require","_labsWidgetCommon","_react","_interopRequireWildcard","_priceCandles","_graphql","_Chart","_TimeZoneLabel","_config","_utils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Main","_ref","division","instrument","dataSource","selectedTimeUnit","setSelectedTimeUnit","useState","TimeSpan","Day_1","loading","data","error","useQuery","priceCandles","variables","granularity","getGranularityForTimeSpan","timeSpan","fetchPolicy","candles","getCandles","showError","length","createElement","className","TimeUnitSwitch","callback","options","timeUnitConfig","selected","Spinner","size","SpinnerSize","lg","ChartError","Chart","values","TimeZoneLabel","exports"],"sources":["../../../src/InstrumentsPriceChartWidget/Main.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport {\n ChartError,\n Spinner,\n SpinnerSize,\n TimeUnitSwitch,\n} from '@oanda/labs-widget-common';\nimport React, { useState } from 'react';\n\nimport { priceCandles } from '../gql/priceCandles';\nimport {\n type PriceCandlesQuery,\n type PriceCandlesQueryVariables,\n TimeSpan,\n} from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { TimeZoneLabel } from './components/TimeZoneLabel';\nimport { timeUnitConfig } from './config';\nimport { type MainProps } from './types';\nimport { getCandles, getGranularityForTimeSpan } from './utils';\n\nconst Main = ({ division, instrument, dataSource }: MainProps) => {\n const [selectedTimeUnit, setSelectedTimeUnit] = useState(TimeSpan.Day_1);\n\n const { loading, data, error } = useQuery<\n PriceCandlesQuery,\n PriceCandlesQueryVariables\n >(priceCandles, {\n variables: {\n dataSource,\n division,\n instrument,\n granularity: getGranularityForTimeSpan(selectedTimeUnit),\n timeSpan: selectedTimeUnit,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const candles = getCandles(data);\n const showError = candles?.length === 0 || !candles || !!error;\n\n return (\n <div data-testid=\"instruments-price-chart-wrapper\">\n <div className=\"lw-flex lw-pt-2\">\n <TimeUnitSwitch<TimeSpan>\n callback={setSelectedTimeUnit}\n options={timeUnitConfig}\n selected={selectedTimeUnit}\n />\n </div>\n\n {loading && (\n <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n\n {!loading && showError && (\n <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n\n {!loading && !showError && (\n <div data-testid=\"instruments-price-chart-widget\">\n <Chart timeSpan={selectedTimeUnit} values={candles} />\n </div>\n )}\n <TimeZoneLabel />\n </div>\n );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,31 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
echarts
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Chart = void 0;
|
|
7
|
+
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
8
|
+
var _monoI18n = require("@oanda/mono-i18n");
|
|
9
|
+
var _charts = require("echarts/charts");
|
|
10
|
+
var _components = require("echarts/components");
|
|
11
|
+
var echarts = _interopRequireWildcard(require("echarts/core"));
|
|
12
|
+
var _renderers = require("echarts/renderers");
|
|
13
|
+
var _react = _interopRequireDefault(require("react"));
|
|
14
|
+
var _constants = require("./constants");
|
|
15
|
+
var _getOption = require("./getOption");
|
|
16
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
+
echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _charts.LineChart, _components.DatasetComponent, _charts.CustomChart, _renderers.CanvasRenderer, _components.TooltipComponent]);
|
|
19
|
+
echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
|
|
20
|
+
echarts.registerTheme('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));
|
|
21
|
+
const Chart = _ref => {
|
|
14
22
|
let {
|
|
15
23
|
values,
|
|
16
24
|
timeSpan
|
|
17
25
|
} = _ref;
|
|
18
26
|
const {
|
|
19
27
|
isDark
|
|
20
|
-
} = useLayoutProvider();
|
|
28
|
+
} = (0, _labsWidgetCommon.useLayoutProvider)();
|
|
21
29
|
const {
|
|
22
30
|
lang
|
|
23
|
-
} = useLocale();
|
|
24
|
-
return
|
|
25
|
-
chartHeight: CHART_HEIGHT,
|
|
31
|
+
} = (0, _monoI18n.useLocale)();
|
|
32
|
+
return _react.default.createElement(_labsWidgetCommon.BaseChart, {
|
|
33
|
+
chartHeight: _constants.CHART_HEIGHT,
|
|
26
34
|
echarts: echarts,
|
|
27
35
|
isDark: isDark,
|
|
28
|
-
option: getOption({
|
|
36
|
+
option: (0, _getOption.getOption)({
|
|
29
37
|
values,
|
|
30
38
|
isDark,
|
|
31
39
|
lang,
|
|
@@ -33,4 +41,5 @@ export const Chart = _ref => {
|
|
|
33
41
|
})
|
|
34
42
|
});
|
|
35
43
|
};
|
|
44
|
+
exports.Chart = Chart;
|
|
36
45
|
//# sourceMappingURL=Chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","names":["
|
|
1
|
+
{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_interopRequireDefault","_constants","_getOption","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","use","GridSimpleComponent","GraphicComponent","LineChart","DatasetComponent","CustomChart","CanvasRenderer","TooltipComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","timeSpan","isDark","useLayoutProvider","lang","useLocale","createElement","BaseChart","chartHeight","CHART_HEIGHT","option","getOption","exports"],"sources":["../../../../src/InstrumentsPriceChartWidget/components/Chart.tsx"],"sourcesContent":["import {\n BaseChart,\n getChartTheme,\n Theme,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CustomChart, LineChart } from 'echarts/charts';\nimport {\n DatasetComponent,\n GraphicComponent,\n GridSimpleComponent,\n TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { CHART_HEIGHT } from './constants';\nimport { getOption } from './getOption';\nimport type { ChartProps } from './types';\n\necharts.use([\n GridSimpleComponent,\n GraphicComponent,\n LineChart,\n DatasetComponent,\n CustomChart,\n CanvasRenderer,\n TooltipComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ values, timeSpan }: ChartProps) => {\n const { isDark } = useLayoutProvider();\n const { lang } = useLocale();\n\n return (\n <BaseChart\n chartHeight={CHART_HEIGHT}\n echarts={echarts}\n isDark={isDark}\n option={getOption({\n values,\n isDark,\n lang,\n timeSpan,\n })}\n />\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAMA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,OAAA,GAAAC,uBAAA,CAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAC,sBAAA,CAAAR,OAAA;AAEA,IAAAS,UAAA,GAAAT,OAAA;AACA,IAAAU,UAAA,GAAAV,OAAA;AAAwC,SAAAQ,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAGxCV,OAAO,CAAC0B,GAAG,CAAC,CACVC,+BAAmB,EACnBC,4BAAgB,EAChBC,iBAAS,EACTC,4BAAgB,EAChBC,mBAAW,EACXC,yBAAc,EACdC,4BAAgB,CACjB,CAAC;AAEFjC,OAAO,CAACkC,aAAa,CAAC,YAAY,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACC,IAAI,CAAC,CAAC;AAC9DrC,OAAO,CAACkC,aAAa,CAAC,aAAa,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACE,KAAK,CAAC,CAAC;AAEzD,MAAMC,KAAK,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EACpD,MAAM;IAAEG;EAAO,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EACtC,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,OACE3C,MAAA,CAAAM,OAAA,CAAAsC,aAAA,CAACpD,iBAAA,CAAAqD,SAAS;IACRC,WAAW,EAAEC,uBAAa;IAC1BlD,OAAO,EAAEA,OAAQ;IACjB2C,MAAM,EAAEA,MAAO;IACfQ,MAAM,EAAE,IAAAC,oBAAS,EAAC;MAChBX,MAAM;MACNE,MAAM;MACNE,IAAI;MACJH;IACF,CAAC;EAAE,CACJ,CAAC;AAEN,CAAC;AAACW,OAAA,CAAAd,KAAA,GAAAA,KAAA","ignoreList":[]}
|
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TimeZoneLabel = void 0;
|
|
7
|
+
var _monoI18n = require("@oanda/mono-i18n");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
3
10
|
const getBrowserOffsetLabel = () => {
|
|
4
11
|
const parts = new Intl.DateTimeFormat(undefined, {
|
|
5
12
|
timeZoneName: 'longOffset'
|
|
@@ -7,15 +14,16 @@ const getBrowserOffsetLabel = () => {
|
|
|
7
14
|
const tzPart = parts.find(p => p.type === 'timeZoneName');
|
|
8
15
|
return tzPart ? tzPart.value : '';
|
|
9
16
|
};
|
|
10
|
-
|
|
17
|
+
const TimeZoneLabel = () => {
|
|
11
18
|
const {
|
|
12
19
|
lang
|
|
13
|
-
} = useLocale();
|
|
14
|
-
return
|
|
20
|
+
} = (0, _monoI18n.useLocale)();
|
|
21
|
+
return _react.default.createElement("span", {
|
|
15
22
|
className: "lw-ml-1 lw-font-sans lw-text-xs lw-font-bold",
|
|
16
23
|
"data-testid": "timezone-label"
|
|
17
24
|
}, `${lang('timezone_display', {
|
|
18
25
|
timezone: getBrowserOffsetLabel()
|
|
19
26
|
})}`);
|
|
20
27
|
};
|
|
28
|
+
exports.TimeZoneLabel = TimeZoneLabel;
|
|
21
29
|
//# sourceMappingURL=TimeZoneLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeZoneLabel.js","names":["
|
|
1
|
+
{"version":3,"file":"TimeZoneLabel.js","names":["_monoI18n","require","_react","_interopRequireDefault","e","__esModule","default","getBrowserOffsetLabel","parts","Intl","DateTimeFormat","undefined","timeZoneName","formatToParts","Date","tzPart","find","p","type","value","TimeZoneLabel","lang","useLocale","createElement","className","timezone","exports"],"sources":["../../../../src/InstrumentsPriceChartWidget/components/TimeZoneLabel.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nconst getBrowserOffsetLabel = (): string => {\n const parts = new Intl.DateTimeFormat(undefined, {\n timeZoneName: 'longOffset',\n }).formatToParts(new Date());\n\n const tzPart = parts.find((p) => p.type === 'timeZoneName');\n return tzPart ? tzPart.value : '';\n};\n\nexport const TimeZoneLabel = () => {\n const { lang } = useLocale();\n\n return (\n <span\n className=\"lw-ml-1 lw-font-sans lw-text-xs lw-font-bold\"\n data-testid=\"timezone-label\"\n >{`${lang('timezone_display', {\n timezone: getBrowserOffsetLabel(),\n })}`}</span>\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE1B,MAAMG,qBAAqB,GAAGA,CAAA,KAAc;EAC1C,MAAMC,KAAK,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IAC/CC,YAAY,EAAE;EAChB,CAAC,CAAC,CAACC,aAAa,CAAC,IAAIC,IAAI,CAAC,CAAC,CAAC;EAE5B,MAAMC,MAAM,GAAGP,KAAK,CAACQ,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,KAAK,cAAc,CAAC;EAC3D,OAAOH,MAAM,GAAGA,MAAM,CAACI,KAAK,GAAG,EAAE;AACnC,CAAC;AAEM,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,OACEpB,MAAA,CAAAI,OAAA,CAAAiB,aAAA;IACEC,SAAS,EAAC,8CAA8C;IACxD,eAAY;EAAgB,GAC5B,GAAGH,IAAI,CAAC,kBAAkB,EAAE;IAC5BI,QAAQ,EAAElB,qBAAqB,CAAC;EAClC,CAAC,CAAC,EAAS,CAAC;AAEhB,CAAC;AAACmB,OAAA,CAAAN,aAAA,GAAAA,aAAA","ignoreList":[]}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Y_LABEL_SIZE_DESKTOP = exports.X_LABEL_SIZE = exports.CHART_WIDTH = exports.CHART_INTERVAL = exports.CHART_HEIGHT = void 0;
|
|
7
|
+
const X_LABEL_SIZE = exports.X_LABEL_SIZE = 40;
|
|
8
|
+
const Y_LABEL_SIZE_DESKTOP = exports.Y_LABEL_SIZE_DESKTOP = 45;
|
|
9
|
+
const CHART_WIDTH = exports.CHART_WIDTH = 9999;
|
|
10
|
+
const CHART_HEIGHT = exports.CHART_HEIGHT = 425;
|
|
11
|
+
const CHART_INTERVAL = exports.CHART_INTERVAL = 0.01;
|
|
6
12
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT","CHART_INTERVAL"],"sources":["../../../../src/InstrumentsPriceChartWidget/components/constants.ts"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 45;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\nexport const CHART_INTERVAL = 0.01;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"constants.js","names":["X_LABEL_SIZE","exports","Y_LABEL_SIZE_DESKTOP","CHART_WIDTH","CHART_HEIGHT","CHART_INTERVAL"],"sources":["../../../../src/InstrumentsPriceChartWidget/components/constants.ts"],"sourcesContent":["export const X_LABEL_SIZE = 40;\nexport const Y_LABEL_SIZE_DESKTOP = 45;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 425;\nexport const CHART_INTERVAL = 0.01;\n"],"mappings":";;;;;;AAAO,MAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,GAAG,EAAE;AAC/B,MAAMC,WAAW,GAAAF,OAAA,CAAAE,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,GAAG;AACxB,MAAMC,cAAc,GAAAJ,OAAA,CAAAI,cAAA,GAAG,IAAI","ignoreList":[]}
|
|
@@ -1,34 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.tooltipFormatter = exports.showSplitLine = exports.labelFormatter = void 0;
|
|
7
|
+
var _graphql = require("../../gql/types/graphql");
|
|
8
|
+
const showSplitLine = (index, total) => {
|
|
3
9
|
const interval = Math.max(1, Math.floor(total / 6));
|
|
4
10
|
return index % interval === 0;
|
|
5
11
|
};
|
|
12
|
+
exports.showSplitLine = showSplitLine;
|
|
6
13
|
const showChartIntervalLabel = (timeSpan, values, index) => {
|
|
7
14
|
const date = new Date(values[index].point);
|
|
8
15
|
const labelInterval = Math.max(1, Math.floor(values.length / 6));
|
|
9
|
-
if (timeSpan === TimeSpan.Month_6 || timeSpan === TimeSpan.Year_1 || timeSpan === TimeSpan.Year_5) {
|
|
16
|
+
if (timeSpan === _graphql.TimeSpan.Month_6 || timeSpan === _graphql.TimeSpan.Year_1 || timeSpan === _graphql.TimeSpan.Year_5) {
|
|
10
17
|
const prev = index > 0 ? new Date(values[index - 1].point) : null;
|
|
11
18
|
const monthChanged = !prev || date.getMonth() !== prev.getMonth() || date.getFullYear() !== prev.getFullYear();
|
|
12
19
|
return monthChanged;
|
|
13
20
|
}
|
|
14
21
|
return index % labelInterval === 0;
|
|
15
22
|
};
|
|
16
|
-
|
|
23
|
+
const labelFormatter = (timeSpan, values) => (_, index) => {
|
|
17
24
|
const date = new Date(values[index].point);
|
|
18
25
|
if (!showChartIntervalLabel(timeSpan, values, index)) return '';
|
|
19
26
|
switch (timeSpan) {
|
|
20
|
-
case TimeSpan.Day_1:
|
|
27
|
+
case _graphql.TimeSpan.Day_1:
|
|
21
28
|
const hour = date.getHours();
|
|
22
29
|
return `${String(hour).padStart(2, '0')}:00`;
|
|
23
|
-
case TimeSpan.Week_1:
|
|
24
|
-
case TimeSpan.Month_1:
|
|
30
|
+
case _graphql.TimeSpan.Week_1:
|
|
31
|
+
case _graphql.TimeSpan.Month_1:
|
|
25
32
|
return date.toLocaleDateString(undefined, {
|
|
26
33
|
day: '2-digit',
|
|
27
34
|
month: 'short'
|
|
28
35
|
});
|
|
29
|
-
case TimeSpan.Month_6:
|
|
30
|
-
case TimeSpan.Year_1:
|
|
31
|
-
case TimeSpan.Year_5:
|
|
36
|
+
case _graphql.TimeSpan.Month_6:
|
|
37
|
+
case _graphql.TimeSpan.Year_1:
|
|
38
|
+
case _graphql.TimeSpan.Year_5:
|
|
32
39
|
return date.toLocaleDateString(undefined, {
|
|
33
40
|
month: 'short'
|
|
34
41
|
});
|
|
@@ -36,6 +43,7 @@ export const labelFormatter = (timeSpan, values) => (_, index) => {
|
|
|
36
43
|
return '';
|
|
37
44
|
}
|
|
38
45
|
};
|
|
46
|
+
exports.labelFormatter = labelFormatter;
|
|
39
47
|
const chartDateTimeFormat = iso => new Date(iso).toLocaleString(undefined, {
|
|
40
48
|
year: 'numeric',
|
|
41
49
|
month: '2-digit',
|
|
@@ -44,7 +52,7 @@ const chartDateTimeFormat = iso => new Date(iso).toLocaleString(undefined, {
|
|
|
44
52
|
minute: '2-digit',
|
|
45
53
|
hour12: false
|
|
46
54
|
});
|
|
47
|
-
|
|
55
|
+
const tooltipFormatter = _ref => {
|
|
48
56
|
let {
|
|
49
57
|
lang,
|
|
50
58
|
data
|
|
@@ -67,4 +75,5 @@ export const tooltipFormatter = _ref => {
|
|
|
67
75
|
</div>
|
|
68
76
|
`;
|
|
69
77
|
};
|
|
78
|
+
exports.tooltipFormatter = tooltipFormatter;
|
|
70
79
|
//# sourceMappingURL=formatters.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatters.js","names":["
|
|
1
|
+
{"version":3,"file":"formatters.js","names":["_graphql","require","showSplitLine","index","total","interval","Math","max","floor","exports","showChartIntervalLabel","timeSpan","values","date","Date","point","labelInterval","length","TimeSpan","Month_6","Year_1","Year_5","prev","monthChanged","getMonth","getFullYear","labelFormatter","_","Day_1","hour","getHours","String","padStart","Week_1","Month_1","toLocaleDateString","undefined","day","month","chartDateTimeFormat","iso","toLocaleString","year","minute","hour12","tooltipFormatter","_ref","lang","data","open","high","close","low","toFixed"],"sources":["../../../../src/InstrumentsPriceChartWidget/components/formatters.ts"],"sourcesContent":["import { TimeSpan } from '../../gql/types/graphql';\nimport type { TooltipFormatterParams } from './types';\n\nexport const showSplitLine = (index: number, total: number): boolean => {\n const interval = Math.max(1, Math.floor(total / 6));\n return index % interval === 0;\n};\n\nconst showChartIntervalLabel = (\n timeSpan: TimeSpan,\n values: { point: string }[],\n index: number\n): boolean => {\n const date = new Date(values[index].point);\n const labelInterval = Math.max(1, Math.floor(values.length / 6));\n\n if (\n timeSpan === TimeSpan.Month_6 ||\n timeSpan === TimeSpan.Year_1 ||\n timeSpan === TimeSpan.Year_5\n ) {\n const prev = index > 0 ? new Date(values[index - 1].point) : null;\n const monthChanged =\n !prev ||\n date.getMonth() !== prev.getMonth() ||\n date.getFullYear() !== prev.getFullYear();\n\n return monthChanged;\n }\n\n return index % labelInterval === 0;\n};\n\nexport const labelFormatter =\n (timeSpan: TimeSpan, values: { point: string }[]) =>\n (_: string, index: number): string => {\n const date = new Date(values[index].point);\n\n if (!showChartIntervalLabel(timeSpan, values, index)) return '';\n\n switch (timeSpan) {\n case TimeSpan.Day_1:\n const hour = date.getHours();\n return `${String(hour).padStart(2, '0')}:00`;\n\n case TimeSpan.Week_1:\n case TimeSpan.Month_1:\n return date.toLocaleDateString(undefined, {\n day: '2-digit',\n month: 'short',\n });\n\n case TimeSpan.Month_6:\n case TimeSpan.Year_1:\n case TimeSpan.Year_5:\n return date.toLocaleDateString(undefined, {\n month: 'short',\n });\n\n default:\n return '';\n }\n };\n\nconst chartDateTimeFormat = (iso: string) =>\n new Date(iso).toLocaleString(undefined, {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n hour12: false,\n });\n\nexport const tooltipFormatter = ({ lang, data }: TooltipFormatterParams) => {\n const { open, high, close, low, point } = data;\n const date = chartDateTimeFormat(point);\n\n return `\n <div style=\"display:flex; flex-direction:column;\">\n <span style=\"margin-bottom:5px;\">${date}</span>\n ${lang('open')}: ${open.toFixed(4)}<br />\n ${lang('high')}: ${high.toFixed(4)}<br />\n ${lang('low')}: ${low.toFixed(4)}<br />\n ${lang('close')}: ${close.toFixed(4)}\n </div>\n `;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getOption = void 0;
|
|
7
|
+
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
8
|
+
var _constants = require("./constants");
|
|
9
|
+
var _formatters = require("./formatters");
|
|
10
|
+
const getOption = _ref => {
|
|
5
11
|
let {
|
|
6
12
|
values,
|
|
7
13
|
isDark,
|
|
@@ -9,12 +15,12 @@ export const getOption = _ref => {
|
|
|
9
15
|
timeSpan
|
|
10
16
|
} = _ref;
|
|
11
17
|
const priceValues = values.map(d => d.high);
|
|
12
|
-
const gridLines = getGridLines({
|
|
18
|
+
const gridLines = (0, _labsWidgetCommon.getGridLines)({
|
|
13
19
|
isDark,
|
|
14
|
-
chartWidth: CHART_WIDTH,
|
|
15
|
-
chartHeight: CHART_HEIGHT,
|
|
16
|
-
xLabelsSize: X_LABEL_SIZE,
|
|
17
|
-
yLabelSize: Y_LABEL_SIZE_DESKTOP,
|
|
20
|
+
chartWidth: _constants.CHART_WIDTH,
|
|
21
|
+
chartHeight: _constants.CHART_HEIGHT,
|
|
22
|
+
xLabelsSize: _constants.X_LABEL_SIZE,
|
|
23
|
+
yLabelSize: _constants.Y_LABEL_SIZE_DESKTOP,
|
|
18
24
|
bottomLeftBox: false
|
|
19
25
|
});
|
|
20
26
|
return {
|
|
@@ -27,7 +33,7 @@ export const getOption = _ref => {
|
|
|
27
33
|
formatter: params => {
|
|
28
34
|
const p = Array.isArray(params) ? params[0] : params;
|
|
29
35
|
const data = p.data;
|
|
30
|
-
return tooltipFormatter({
|
|
36
|
+
return (0, _formatters.tooltipFormatter)({
|
|
31
37
|
lang,
|
|
32
38
|
data
|
|
33
39
|
});
|
|
@@ -43,19 +49,19 @@ export const getOption = _ref => {
|
|
|
43
49
|
axisLabel: {
|
|
44
50
|
padding: [0, 0, 0, 30],
|
|
45
51
|
interval: 'auto',
|
|
46
|
-
formatter: labelFormatter(timeSpan, values)
|
|
52
|
+
formatter: (0, _formatters.labelFormatter)(timeSpan, values)
|
|
47
53
|
},
|
|
48
54
|
splitLine: {
|
|
49
55
|
show: true,
|
|
50
|
-
interval: index => showSplitLine(index, values.length)
|
|
56
|
+
interval: index => (0, _formatters.showSplitLine)(index, values.length)
|
|
51
57
|
}
|
|
52
58
|
},
|
|
53
59
|
yAxis: {
|
|
54
60
|
type: 'value',
|
|
55
61
|
position: 'right',
|
|
56
|
-
min: value => Math.floor(value.min * 100) / 100 - CHART_INTERVAL,
|
|
57
|
-
max: value => Math.ceil(value.max * 100) / 100 + CHART_INTERVAL,
|
|
58
|
-
interval: CHART_INTERVAL,
|
|
62
|
+
min: value => Math.floor(value.min * 100) / 100 - _constants.CHART_INTERVAL,
|
|
63
|
+
max: value => Math.ceil(value.max * 100) / 100 + _constants.CHART_INTERVAL,
|
|
64
|
+
interval: _constants.CHART_INTERVAL,
|
|
59
65
|
axisLine: {
|
|
60
66
|
show: false
|
|
61
67
|
},
|
|
@@ -88,7 +94,7 @@ export const getOption = _ref => {
|
|
|
88
94
|
smooth: true,
|
|
89
95
|
symbol: 'none',
|
|
90
96
|
lineStyle: {
|
|
91
|
-
color: colorPalette.navyBlue,
|
|
97
|
+
color: _labsWidgetCommon.colorPalette.navyBlue,
|
|
92
98
|
width: 2
|
|
93
99
|
},
|
|
94
100
|
areaStyle: {
|
|
@@ -100,10 +106,10 @@ export const getOption = _ref => {
|
|
|
100
106
|
y2: 1,
|
|
101
107
|
colorStops: [{
|
|
102
108
|
offset: 0,
|
|
103
|
-
color: colorPalette.brightBlue30
|
|
109
|
+
color: _labsWidgetCommon.colorPalette.brightBlue30
|
|
104
110
|
}, {
|
|
105
111
|
offset: 1,
|
|
106
|
-
color: colorPalette.brightBlue
|
|
112
|
+
color: _labsWidgetCommon.colorPalette.brightBlue
|
|
107
113
|
}]
|
|
108
114
|
}
|
|
109
115
|
}
|
|
@@ -112,11 +118,11 @@ export const getOption = _ref => {
|
|
|
112
118
|
name: 'main-grid',
|
|
113
119
|
top: 0,
|
|
114
120
|
left: 0,
|
|
115
|
-
right: `${Y_LABEL_SIZE_DESKTOP}px`,
|
|
116
|
-
bottom: `${X_LABEL_SIZE}px`
|
|
121
|
+
right: `${_constants.Y_LABEL_SIZE_DESKTOP}px`,
|
|
122
|
+
bottom: `${_constants.X_LABEL_SIZE}px`
|
|
117
123
|
}],
|
|
118
124
|
graphic: [...gridLines, {
|
|
119
|
-
...getLineCommons(isDark),
|
|
125
|
+
...(0, _labsWidgetCommon.getLineCommons)(isDark),
|
|
120
126
|
top: 0,
|
|
121
127
|
right: 0,
|
|
122
128
|
shape: {
|
|
@@ -128,4 +134,5 @@ export const getOption = _ref => {
|
|
|
128
134
|
}]
|
|
129
135
|
};
|
|
130
136
|
};
|
|
137
|
+
exports.getOption = getOption;
|
|
131
138
|
//# sourceMappingURL=getOption.js.map
|