@artsy/palette-charts 39.3.0-canary.1417.31465.0 → 39.3.0
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/dist/elements/BarChart/Bar.d.ts +24 -0
- package/dist/elements/BarChart/Bar.js +149 -0
- package/dist/elements/BarChart/Bar.js.map +1 -0
- package/dist/elements/BarChart/BarChart.d.ts +21 -0
- package/dist/elements/BarChart/BarChart.js +160 -0
- package/dist/elements/BarChart/BarChart.js.map +1 -0
- package/dist/elements/BarChart/BarChart.story.d.ts +6 -0
- package/dist/elements/BarChart/BarChart.story.js +154 -0
- package/dist/elements/BarChart/BarChart.story.js.map +1 -0
- package/dist/elements/BarChart/index.d.ts +2 -0
- package/dist/elements/BarChart/index.js +28 -0
- package/dist/elements/BarChart/index.js.map +1 -0
- package/dist/elements/DataVis/ChartHoverTooltip.d.ts +13 -0
- package/dist/elements/DataVis/ChartHoverTooltip.js +52 -0
- package/dist/elements/DataVis/ChartHoverTooltip.js.map +1 -0
- package/dist/elements/DataVis/ChartTooltip.d.ts +23 -0
- package/dist/elements/DataVis/ChartTooltip.js +68 -0
- package/dist/elements/DataVis/ChartTooltip.js.map +1 -0
- package/dist/elements/DataVis/MousePositionContext.d.ts +6 -0
- package/dist/elements/DataVis/MousePositionContext.js +52 -0
- package/dist/elements/DataVis/MousePositionContext.js.map +1 -0
- package/dist/elements/DataVis/useIntersectionObserver.d.ts +16 -0
- package/dist/elements/DataVis/useIntersectionObserver.js +67 -0
- package/dist/elements/DataVis/useIntersectionObserver.js.map +1 -0
- package/dist/elements/DataVis/utils/SharedTypes.d.ts +10 -0
- package/dist/elements/DataVis/utils/SharedTypes.js +2 -0
- package/dist/elements/DataVis/utils/SharedTypes.js.map +1 -0
- package/dist/elements/DataVis/utils/useWrapperWidth.d.ts +5 -0
- package/dist/elements/DataVis/utils/useWrapperWidth.js +41 -0
- package/dist/elements/DataVis/utils/useWrapperWidth.js.map +1 -0
- package/dist/elements/DonutChart/DonutChart.d.ts +10 -0
- package/dist/elements/DonutChart/DonutChart.js +162 -0
- package/dist/elements/DonutChart/DonutChart.js.map +1 -0
- package/dist/elements/DonutChart/DonutChart.story.d.ts +6 -0
- package/dist/elements/DonutChart/DonutChart.story.js +45 -0
- package/dist/elements/DonutChart/DonutChart.story.js.map +1 -0
- package/dist/elements/DonutChart/index.d.ts +1 -0
- package/dist/elements/DonutChart/index.js +17 -0
- package/dist/elements/DonutChart/index.js.map +1 -0
- package/dist/elements/LineChart/Line.d.ts +8 -0
- package/dist/elements/LineChart/Line.js +24 -0
- package/dist/elements/LineChart/Line.js.map +1 -0
- package/dist/elements/LineChart/LineChart.d.ts +14 -0
- package/dist/elements/LineChart/LineChart.js +123 -0
- package/dist/elements/LineChart/LineChart.js.map +1 -0
- package/dist/elements/LineChart/LineChartSVG.d.ts +15 -0
- package/dist/elements/LineChart/LineChartSVG.js +84 -0
- package/dist/elements/LineChart/LineChartSVG.js.map +1 -0
- package/dist/elements/LineChart/Point.d.ts +11 -0
- package/dist/elements/LineChart/Point.js +29 -0
- package/dist/elements/LineChart/Point.js.map +1 -0
- package/dist/elements/LineChart/index.d.ts +1 -0
- package/dist/elements/LineChart/index.js +17 -0
- package/dist/elements/LineChart/index.js.map +1 -0
- package/dist/elements/index.d.ts +3 -0
- package/dist/elements/index.js +39 -0
- package/dist/elements/index.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +17 -0
- package/dist/index.js.map +1 -0
- package/package.json +4 -2
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Tooltip for bar and line charts
|
|
4
|
+
*/
|
|
5
|
+
export declare const ChartHoverTooltip: ({ children }: {
|
|
6
|
+
children: any;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
|
+
/**
|
|
9
|
+
* Base component for positioning tooltips
|
|
10
|
+
*/
|
|
11
|
+
export declare const BaseTooltipPositioner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, "ref"> & {
|
|
12
|
+
ref?: ((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>;
|
|
13
|
+
}, keyof import("@artsy/palette").BoxProps> & import("@artsy/palette").BoxProps, never>> & string;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ChartHoverTooltip = exports.BaseTooltipPositioner = void 0;
|
|
8
|
+
var _palette = require("@artsy/palette");
|
|
9
|
+
var _themeGet = require("@styled-system/theme-get");
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
12
|
+
var _MousePositionContext = require("./MousePositionContext");
|
|
13
|
+
var _templateObject;
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
18
|
+
var LABEL_OFFSET = 10;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Tooltip for bar and line charts
|
|
22
|
+
*/
|
|
23
|
+
var ChartHoverTooltip = function ChartHoverTooltip(_ref) {
|
|
24
|
+
var children = _ref.children;
|
|
25
|
+
var ref = (0, _react.useRef)(null);
|
|
26
|
+
var _useContext = (0, _react.useContext)(_MousePositionContext.MousePositionContext),
|
|
27
|
+
x = _useContext.x,
|
|
28
|
+
y = _useContext.y;
|
|
29
|
+
if (ref.current) {
|
|
30
|
+
// position outside of the render loop to avoid GC churn
|
|
31
|
+
ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + "px";
|
|
32
|
+
ref.current.style.left = x + "px";
|
|
33
|
+
}
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(HoverTooltipPositioner, {
|
|
35
|
+
ref: ref
|
|
36
|
+
}, children);
|
|
37
|
+
};
|
|
38
|
+
exports.ChartHoverTooltip = ChartHoverTooltip;
|
|
39
|
+
ChartHoverTooltip.displayName = "ChartHoverTooltip";
|
|
40
|
+
/**
|
|
41
|
+
* Base component for positioning tooltips
|
|
42
|
+
*/
|
|
43
|
+
var BaseTooltipPositioner = (0, _styledComponents.default)(_palette.Flex).withConfig({
|
|
44
|
+
displayName: "ChartHoverTooltip__BaseTooltipPositioner",
|
|
45
|
+
componentId: "sc-2qa7c8-0"
|
|
46
|
+
})(["transform:translateX(-50%);pointer-events:none;border-radius:2px;"]);
|
|
47
|
+
exports.BaseTooltipPositioner = BaseTooltipPositioner;
|
|
48
|
+
var HoverTooltipPositioner = (0, _styledComponents.default)(BaseTooltipPositioner).withConfig({
|
|
49
|
+
displayName: "ChartHoverTooltip__HoverTooltipPositioner",
|
|
50
|
+
componentId: "sc-2qa7c8-1"
|
|
51
|
+
})(["", ";z-index:2;position:fixed;background-color:", ";box-shadow:", ";"], _palette.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n "]))), (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("effects.dropShadow"));
|
|
52
|
+
//# sourceMappingURL=ChartHoverTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartHoverTooltip.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_MousePositionContext","_templateObject","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","LABEL_OFFSET","ChartHoverTooltip","_ref","children","ref","useRef","_useContext","useContext","MousePositionContext","x","y","current","style","top","offsetHeight","left","createElement","HoverTooltipPositioner","exports","displayName","BaseTooltipPositioner","styled","Flex","withConfig","componentId","media","xs","themeGet"],"sources":["../../../src/elements/DataVis/ChartHoverTooltip.tsx"],"sourcesContent":["import { Flex, media } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useContext, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { MousePositionContext } from \"./MousePositionContext\"\n\nconst LABEL_OFFSET = 10\n\n/**\n * Tooltip for bar and line charts\n */\nexport const ChartHoverTooltip = ({ children }) => {\n const ref = useRef(null)\n const { x, y } = useContext(MousePositionContext)\n if (ref.current) {\n // position outside of the render loop to avoid GC churn\n ref.current.style.top = y - LABEL_OFFSET - ref.current.offsetHeight + \"px\"\n ref.current.style.left = x + \"px\"\n }\n return <HoverTooltipPositioner ref={ref}>{children}</HoverTooltipPositioner>\n}\n\n/**\n * Base component for positioning tooltips\n */\nexport const BaseTooltipPositioner = styled(Flex)`\n transform: translateX(-50%);\n pointer-events: none;\n border-radius: 2px;\n`\n\nconst HoverTooltipPositioner = styled(BaseTooltipPositioner)`\n ${media.xs`\n display: none;\n `};\n z-index: 2;\n position: fixed;\n background-color: ${themeGet(\"colors.white100\")};\n box-shadow: ${themeGet(\"effects.dropShadow\")};\n`\n"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { FlexProps } from "@artsy/palette";
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Returns tooltip component based on the type of tooltip param passed to it
|
|
5
|
+
* @param tooltip either a component or hash containing `title` and `description`
|
|
6
|
+
*/
|
|
7
|
+
export declare const coerceTooltip: (tooltip: React.ReactNode | ChartTooltipProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
|
|
8
|
+
/**
|
|
9
|
+
* Similart to `coerceTooltip` but without padding
|
|
10
|
+
* @param tooltip
|
|
11
|
+
*/
|
|
12
|
+
export declare const coerceTooltipWithoutPadding: (tooltip: React.ReactNode | ChartTooltipProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
|
|
13
|
+
export interface ChartTooltipProps extends FlexProps {
|
|
14
|
+
title: React.ReactNode;
|
|
15
|
+
description: React.ReactNode;
|
|
16
|
+
noPadding?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare function isChartTooltipProps(obj: any): obj is ChartTooltipProps;
|
|
19
|
+
/**
|
|
20
|
+
* ChartTooltip is the default content format for a label on a BarChart.
|
|
21
|
+
* @param props
|
|
22
|
+
*/
|
|
23
|
+
export declare const ChartTooltip: ({ title, description, noPadding, ...others }: ChartTooltipProps) => React.JSX.Element;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.coerceTooltipWithoutPadding = exports.coerceTooltip = exports.ChartTooltip = void 0;
|
|
7
|
+
exports.isChartTooltipProps = isChartTooltipProps;
|
|
8
|
+
var _palette = require("@artsy/palette");
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _excluded = ["title", "description", "noPadding"];
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
14
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
15
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
16
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
var ChartTooltipWrapper = (0, _styledComponents.default)(_palette.Flex).withConfig({
|
|
18
|
+
displayName: "ChartTooltip__ChartTooltipWrapper",
|
|
19
|
+
componentId: "sc-1g8t4p3-0"
|
|
20
|
+
})(["text-align:center;align-items:center;flex-direction:column;white-space:nowrap;"]);
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Returns tooltip component based on the type of tooltip param passed to it
|
|
24
|
+
* @param tooltip either a component or hash containing `title` and `description`
|
|
25
|
+
*/
|
|
26
|
+
var coerceTooltip = function coerceTooltip(tooltip) {
|
|
27
|
+
return isChartTooltipProps(tooltip) ? /*#__PURE__*/_react.default.createElement(ChartTooltip, tooltip) : tooltip;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Similart to `coerceTooltip` but without padding
|
|
32
|
+
* @param tooltip
|
|
33
|
+
*/
|
|
34
|
+
exports.coerceTooltip = coerceTooltip;
|
|
35
|
+
var coerceTooltipWithoutPadding = function coerceTooltipWithoutPadding(tooltip) {
|
|
36
|
+
return isChartTooltipProps(tooltip) ? /*#__PURE__*/_react.default.createElement(ChartTooltip, _extends({
|
|
37
|
+
noPadding: true
|
|
38
|
+
}, tooltip)) : tooltip;
|
|
39
|
+
};
|
|
40
|
+
exports.coerceTooltipWithoutPadding = coerceTooltipWithoutPadding;
|
|
41
|
+
// tslint:disable-next-line:completed-docs
|
|
42
|
+
function isChartTooltipProps(obj) {
|
|
43
|
+
var result = obj && _typeof(obj) === "object" && obj.hasOwnProperty("title") && obj.hasOwnProperty("description");
|
|
44
|
+
return result;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* ChartTooltip is the default content format for a label on a BarChart.
|
|
49
|
+
* @param props
|
|
50
|
+
*/
|
|
51
|
+
var ChartTooltip = function ChartTooltip(_ref) {
|
|
52
|
+
var title = _ref.title,
|
|
53
|
+
description = _ref.description,
|
|
54
|
+
noPadding = _ref.noPadding,
|
|
55
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement(ChartTooltipWrapper, _extends({
|
|
57
|
+
py: noPadding ? 0 : 0.5,
|
|
58
|
+
px: noPadding ? 0 : 1
|
|
59
|
+
}, others), /*#__PURE__*/_react.default.createElement(_palette.Text, {
|
|
60
|
+
variant: "xs"
|
|
61
|
+
}, title), /*#__PURE__*/_react.default.createElement(_palette.Text, {
|
|
62
|
+
color: "black60",
|
|
63
|
+
variant: "xs"
|
|
64
|
+
}, description));
|
|
65
|
+
};
|
|
66
|
+
exports.ChartTooltip = ChartTooltip;
|
|
67
|
+
ChartTooltip.displayName = "ChartTooltip";
|
|
68
|
+
//# sourceMappingURL=ChartTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartTooltip.js","names":["_palette","require","_react","_interopRequireDefault","_styledComponents","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_typeof","Symbol","iterator","constructor","_extends","assign","bind","arguments","hasOwnProperty","apply","ChartTooltipWrapper","styled","Flex","withConfig","displayName","componentId","coerceTooltip","tooltip","isChartTooltipProps","createElement","ChartTooltip","exports","coerceTooltipWithoutPadding","noPadding","result","_ref","title","description","others","py","px","Text","variant","color"],"sources":["../../../src/elements/DataVis/ChartTooltip.tsx"],"sourcesContent":["import { Flex, FlexProps, Text } from \"@artsy/palette\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst ChartTooltipWrapper = styled(Flex)`\n text-align: center;\n align-items: center;\n flex-direction: column;\n white-space: nowrap;\n`\n\n/**\n * Returns tooltip component based on the type of tooltip param passed to it\n * @param tooltip either a component or hash containing `title` and `description`\n */\nexport const coerceTooltip = (tooltip: React.ReactNode | ChartTooltipProps) =>\n isChartTooltipProps(tooltip) ? <ChartTooltip {...tooltip} /> : tooltip\n\n/**\n * Similart to `coerceTooltip` but without padding\n * @param tooltip\n */\nexport const coerceTooltipWithoutPadding = (\n tooltip: React.ReactNode | ChartTooltipProps\n) =>\n isChartTooltipProps(tooltip) ? (\n <ChartTooltip noPadding {...tooltip} />\n ) : (\n tooltip\n )\n\nexport interface ChartTooltipProps extends FlexProps {\n title: React.ReactNode\n description: React.ReactNode\n noPadding?: boolean\n}\n\n// tslint:disable-next-line:completed-docs\nexport function isChartTooltipProps(obj: any): obj is ChartTooltipProps {\n const result =\n obj &&\n typeof obj === \"object\" &&\n obj.hasOwnProperty(\"title\") &&\n obj.hasOwnProperty(\"description\")\n return result\n}\n\n/**\n * ChartTooltip is the default content format for a label on a BarChart.\n * @param props\n */\nexport const ChartTooltip = ({\n title,\n description,\n noPadding,\n ...others\n}: ChartTooltipProps) => (\n <ChartTooltipWrapper\n py={noPadding ? 0 : 0.5}\n px={noPadding ? 0 : 1}\n {...others}\n >\n <Text variant=\"xs\">{title}</Text>\n\n <Text color=\"black60\" variant=\"xs\">\n {description}\n </Text>\n </ChartTooltipWrapper>\n)\n"],"mappings":"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"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ProvideMousePosition = exports.MousePositionContext = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
12
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
15
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
16
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
// tslint:disable-next-line:completed-docs
|
|
18
|
+
var MousePositionContext = /*#__PURE__*/_react.default.createContext({
|
|
19
|
+
x: 0,
|
|
20
|
+
y: 0
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// tslint:disable-next-line:completed-docs
|
|
24
|
+
exports.MousePositionContext = MousePositionContext;
|
|
25
|
+
var ProvideMousePosition = function ProvideMousePosition(_ref) {
|
|
26
|
+
var children = _ref.children;
|
|
27
|
+
var _useState = (0, _react.useState)({
|
|
28
|
+
x: 0,
|
|
29
|
+
y: 0
|
|
30
|
+
}),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
state = _useState2[0],
|
|
33
|
+
setState = _useState2[1];
|
|
34
|
+
(0, _react.useEffect)(function () {
|
|
35
|
+
var setMousePosition = function setMousePosition(ev) {
|
|
36
|
+
setState({
|
|
37
|
+
x: ev.clientX,
|
|
38
|
+
y: ev.clientY
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
window.addEventListener("mousemove", setMousePosition);
|
|
42
|
+
return function () {
|
|
43
|
+
window.removeEventListener("mousemove", setMousePosition);
|
|
44
|
+
};
|
|
45
|
+
}, [false]);
|
|
46
|
+
return /*#__PURE__*/_react.default.createElement(MousePositionContext.Provider, {
|
|
47
|
+
value: state
|
|
48
|
+
}, children);
|
|
49
|
+
};
|
|
50
|
+
exports.ProvideMousePosition = ProvideMousePosition;
|
|
51
|
+
ProvideMousePosition.displayName = "ProvideMousePosition";
|
|
52
|
+
//# sourceMappingURL=MousePositionContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MousePositionContext.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","MousePositionContext","React","createContext","x","y","exports","ProvideMousePosition","_ref","children","_useState","useState","_useState2","state","setState","useEffect","setMousePosition","ev","clientX","clientY","window","addEventListener","removeEventListener","createElement","Provider","displayName"],"sources":["../../../src/elements/DataVis/MousePositionContext.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\n\n// tslint:disable-next-line:completed-docs\nexport const MousePositionContext = React.createContext({ x: 0, y: 0 })\n\n// tslint:disable-next-line:completed-docs\nexport const ProvideMousePosition: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n const [state, setState] = useState({ x: 0, y: 0 })\n\n useEffect(() => {\n const setMousePosition = (ev: MouseEvent) => {\n setState({\n x: ev.clientX,\n y: ev.clientY,\n })\n }\n window.addEventListener(\"mousemove\", setMousePosition)\n return () => {\n window.removeEventListener(\"mousemove\", setMousePosition)\n }\n }, [false])\n\n return (\n <MousePositionContext.Provider value={state}>\n {children}\n </MousePositionContext.Provider>\n )\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
interface UseIntersectionObserverProperties {
|
|
3
|
+
ref?: RefObject<Element> | null;
|
|
4
|
+
once?: boolean;
|
|
5
|
+
options?: {
|
|
6
|
+
threshold: number | number[];
|
|
7
|
+
root?: Element;
|
|
8
|
+
rootMargin?: string;
|
|
9
|
+
};
|
|
10
|
+
onIntersection?: (entries: IntersectionObserverEntry[]) => void;
|
|
11
|
+
onOffIntersection?: (entries: IntersectionObserverEntry[]) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const useIntersectionObserver: ({ once, options, onIntersection, onOffIntersection, }: UseIntersectionObserverProperties) => {
|
|
14
|
+
ref: import("react").MutableRefObject<HTMLElement>;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useIntersectionObserver = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
// tslint:disable-next-line:completed-docs
|
|
15
|
+
var useIntersectionObserver = function useIntersectionObserver(_ref) {
|
|
16
|
+
var _ref$once = _ref.once,
|
|
17
|
+
once = _ref$once === void 0 ? true : _ref$once,
|
|
18
|
+
_ref$options = _ref.options,
|
|
19
|
+
options = _ref$options === void 0 ? {
|
|
20
|
+
threshold: 0
|
|
21
|
+
} : _ref$options,
|
|
22
|
+
onIntersection = _ref.onIntersection,
|
|
23
|
+
onOffIntersection = _ref.onOffIntersection;
|
|
24
|
+
var ref = (0, _react.useRef)(null);
|
|
25
|
+
var handleIntersect = function handleIntersect(entries) {
|
|
26
|
+
if (!observer) return;
|
|
27
|
+
if (once) {
|
|
28
|
+
var hasIntersected = entries.some(
|
|
29
|
+
// tslint:disable-next-line:no-shadowed-variable
|
|
30
|
+
function (_ref2) {
|
|
31
|
+
var isIntersecting = _ref2.isIntersecting;
|
|
32
|
+
return isIntersecting;
|
|
33
|
+
});
|
|
34
|
+
if (hasIntersected) {
|
|
35
|
+
onIntersection === null || onIntersection === void 0 ? void 0 : onIntersection(entries);
|
|
36
|
+
observer.disconnect();
|
|
37
|
+
} else {
|
|
38
|
+
onOffIntersection === null || onOffIntersection === void 0 ? void 0 : onOffIntersection(entries);
|
|
39
|
+
}
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
var isIntersecting = entries[entries.length - 1].isIntersecting;
|
|
43
|
+
if (!isIntersecting) {
|
|
44
|
+
onOffIntersection === null || onOffIntersection === void 0 ? void 0 : onOffIntersection(entries);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
onIntersection === null || onIntersection === void 0 ? void 0 : onIntersection(entries);
|
|
48
|
+
};
|
|
49
|
+
var _useState = (0, _react.useState)(function () {
|
|
50
|
+
return isClientSide ? new IntersectionObserver(handleIntersect, options) : undefined;
|
|
51
|
+
}),
|
|
52
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
53
|
+
observer = _useState2[0];
|
|
54
|
+
(0, _react.useEffect)(function () {
|
|
55
|
+
if (!ref.current || !observer) return;
|
|
56
|
+
observer.observe(ref.current);
|
|
57
|
+
return function () {
|
|
58
|
+
observer.disconnect();
|
|
59
|
+
};
|
|
60
|
+
}, [ref, observer]);
|
|
61
|
+
return {
|
|
62
|
+
ref: ref
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
exports.useIntersectionObserver = useIntersectionObserver;
|
|
66
|
+
var isClientSide = typeof window !== "undefined";
|
|
67
|
+
//# sourceMappingURL=useIntersectionObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","useIntersectionObserver","_ref","_ref$once","once","_ref$options","options","threshold","onIntersection","onOffIntersection","ref","useRef","handleIntersect","entries","observer","hasIntersected","some","_ref2","isIntersecting","disconnect","_useState","useState","isClientSide","IntersectionObserver","undefined","_useState2","useEffect","current","observe","exports","window"],"sources":["../../../src/elements/DataVis/useIntersectionObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from \"react\"\n\ninterface UseIntersectionObserverProperties {\n ref?: RefObject<Element> | null\n once?: boolean\n options?: {\n threshold: number | number[]\n root?: Element\n rootMargin?: string\n }\n onIntersection?: (entries: IntersectionObserverEntry[]) => void\n onOffIntersection?: (entries: IntersectionObserverEntry[]) => void\n}\n\n// tslint:disable-next-line:completed-docs\nexport const useIntersectionObserver = ({\n once = true,\n options = { threshold: 0 },\n onIntersection,\n onOffIntersection,\n}: UseIntersectionObserverProperties) => {\n const ref = useRef<HTMLElement | null>(null)\n\n const handleIntersect = (entries: IntersectionObserverEntry[]) => {\n if (!observer) return\n\n if (once) {\n const hasIntersected = entries.some(\n // tslint:disable-next-line:no-shadowed-variable\n ({ isIntersecting }) => isIntersecting\n )\n\n if (hasIntersected) {\n onIntersection?.(entries)\n observer.disconnect()\n } else {\n onOffIntersection?.(entries)\n }\n\n return\n }\n\n const isIntersecting = entries[entries.length - 1].isIntersecting\n\n if (!isIntersecting) {\n onOffIntersection?.(entries)\n return\n }\n\n onIntersection?.(entries)\n }\n\n const [observer] = useState(() =>\n isClientSide\n ? new IntersectionObserver(handleIntersect, options)\n : undefined\n )\n\n useEffect(() => {\n if (!ref.current || !observer) return\n\n observer.observe(ref.current)\n\n return () => {\n observer.disconnect()\n }\n }, [ref, observer])\n\n return { ref }\n}\n\nconst isClientSide = typeof window !== \"undefined\"\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ChartTooltipProps } from "../ChartTooltip";
|
|
3
|
+
export interface PointDescriptor {
|
|
4
|
+
value: number;
|
|
5
|
+
axisLabelX?: React.ReactNode | ChartTooltipProps;
|
|
6
|
+
tooltip?: React.ReactNode | ChartTooltipProps;
|
|
7
|
+
}
|
|
8
|
+
export interface ChartProps {
|
|
9
|
+
points: PointDescriptor[];
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SharedTypes.js","names":[],"sources":["../../../../src/elements/DataVis/utils/SharedTypes.ts"],"sourcesContent":["import { ChartTooltipProps } from \"../ChartTooltip\"\n\nexport interface PointDescriptor {\n value: number\n axisLabelX?: React.ReactNode | ChartTooltipProps\n tooltip?: React.ReactNode | ChartTooltipProps\n}\n\nexport interface ChartProps {\n points: PointDescriptor[]\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useWrapperWidth = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
/**
|
|
15
|
+
* Returns width of container element
|
|
16
|
+
* @param ref reference to wrapper component
|
|
17
|
+
*/
|
|
18
|
+
var useWrapperWidth = function useWrapperWidth(ref) {
|
|
19
|
+
var _useState = (0, _react.useState)(0),
|
|
20
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
+
width = _useState2[0],
|
|
22
|
+
setWidth = _useState2[1];
|
|
23
|
+
var widthCheckInterval = (0, _react.useRef)(null);
|
|
24
|
+
(0, _react.useEffect)(function () {
|
|
25
|
+
var setContainerWidth = function setContainerWidth() {
|
|
26
|
+
if (ref.current) {
|
|
27
|
+
setWidth(ref.current.getBoundingClientRect().width - 5);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
setContainerWidth();
|
|
31
|
+
widthCheckInterval.current = setInterval(setContainerWidth, 500);
|
|
32
|
+
window.addEventListener("resize", setContainerWidth);
|
|
33
|
+
return function cleanup() {
|
|
34
|
+
window.removeEventListener("resize", setContainerWidth);
|
|
35
|
+
clearInterval(widthCheckInterval.current);
|
|
36
|
+
};
|
|
37
|
+
}, []);
|
|
38
|
+
return width;
|
|
39
|
+
};
|
|
40
|
+
exports.useWrapperWidth = useWrapperWidth;
|
|
41
|
+
//# sourceMappingURL=useWrapperWidth.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWrapperWidth.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","useWrapperWidth","ref","_useState","useState","_useState2","width","setWidth","widthCheckInterval","useRef","useEffect","setContainerWidth","current","getBoundingClientRect","setInterval","window","addEventListener","cleanup","removeEventListener","clearInterval","exports"],"sources":["../../../../src/elements/DataVis/utils/useWrapperWidth.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\"\n\n/**\n * Returns width of container element\n * @param ref reference to wrapper component\n */\nexport const useWrapperWidth = (ref: React.RefObject<HTMLElement>) => {\n const [width, setWidth] = useState(0)\n\n const widthCheckInterval = useRef(null)\n\n useEffect(() => {\n const setContainerWidth = () => {\n if (ref.current) {\n setWidth(ref.current.getBoundingClientRect().width - 5)\n }\n }\n\n setContainerWidth()\n\n widthCheckInterval.current = setInterval(setContainerWidth, 500)\n\n window.addEventListener(\"resize\", setContainerWidth)\n\n return function cleanup() {\n window.removeEventListener(\"resize\", setContainerWidth)\n clearInterval(widthCheckInterval.current)\n }\n }, [])\n\n return width\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ChartProps } from "../DataVis/utils/SharedTypes";
|
|
3
|
+
export interface DonutChartProps extends ChartProps {
|
|
4
|
+
margin?: number;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* DonutChart is a component that displays data points with donut shaped arcs.
|
|
8
|
+
* Good for illustrating numerical proportions.
|
|
9
|
+
*/
|
|
10
|
+
export declare const DonutChart: React.FC<React.PropsWithChildren<DonutChartProps>>;
|