diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25ee4d29d..95bd4236e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -45,7 +45,7 @@ Create a new file [src/client/visualizations/](https://github.com/allegro/turnil Here you want to add the basis for your component with the visualization panel at the top: ``` -const : React.SFC = () => { +const : React.FunctionComponent = () => { return

New visualization will be here!

; diff --git a/package-lock.json b/package-lock.json index b4f6dc135..d152374b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2843,9 +2843,9 @@ "dev": true }, "@types/react": { - "version": "16.14.23", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.23.tgz", - "integrity": "sha512-WngBZLuSkP4IAgPi0HOsGCHo6dn3CcuLQnCfC17VbA7YBgipZiZoTOhObwl/93DsFW0Y2a/ZXeonpW4DxirEJg==", + "version": "16.14.24", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.24.tgz", + "integrity": "sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==", "dev": true, "requires": { "@types/prop-types": "*", @@ -2863,12 +2863,12 @@ } }, "@types/react-dom": { - "version": "16.0.11", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.11.tgz", - "integrity": "sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA==", + "version": "16.9.14", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.14.tgz", + "integrity": "sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==", "dev": true, "requires": { - "@types/react": "*" + "@types/react": "^16" } }, "@types/react-syntax-highlighter": { @@ -4506,11 +4506,6 @@ "chai": ">1.9.0" } }, - "chain-function": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz", - "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==" - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -14649,14 +14644,13 @@ } }, "react": { - "version": "16.6.3", - "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz", - "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.11.2" + "prop-types": "^15.6.2" } }, "react-copy-to-clipboard": { @@ -14675,14 +14669,14 @@ "dev": true }, "react-dom": { - "version": "16.6.3", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz", - "integrity": "sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.11.2" + "scheduler": "^0.19.1" } }, "react-hot-loader": { @@ -14711,6 +14705,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-proxy": { "version": "3.0.0-alpha.1", "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz", @@ -14751,16 +14750,14 @@ } }, "react-transition-group": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz", - "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz", + "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==", "requires": { - "chain-function": "^1.0.0", - "classnames": "^2.2.5", - "dom-helpers": "^3.2.0", + "dom-helpers": "^3.3.1", "loose-envify": "^1.3.1", - "prop-types": "^15.5.8", - "warning": "^3.0.0" + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" } }, "read-pkg": { @@ -15444,9 +15441,9 @@ "dev": true }, "scheduler": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.3.tgz", - "integrity": "sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -17732,14 +17729,6 @@ } } }, - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 4fc83e620..ffb044539 100644 --- a/package.json +++ b/package.json @@ -93,11 +93,11 @@ "plywood": "0.21.2", "plywood-base-api": "0.2.8", "plywood-druid-requester": "2.6.1", - "react": "16.6.3", + "react": "16.14.0", "react-copy-to-clipboard": "5.0.1", - "react-dom": "16.6.3", + "react-dom": "16.14.0", "react-syntax-highlighter": "15.4.5", - "react-transition-group": "2.2.1", + "react-transition-group": "2.4.0", "request": "2.87.0", "request-promise-native": "1.0.5" }, @@ -136,9 +136,9 @@ "@types/node": "8.5.2", "@types/nopt": "3.0.29", "@types/randomstring": "1.1.6", - "@types/react": "16.14.23", + "@types/react": "16.14.24", "@types/react-copy-to-clipboard": "4.3.0", - "@types/react-dom": "16.0.11", + "@types/react-dom": "16.9.14", "@types/react-syntax-highlighter": "13.5.2", "@types/react-transition-group": "2.0.7", "@types/request-promise-native": "1.0.14", diff --git a/src/client/applications/turnilo-application/turnilo-application.tsx b/src/client/applications/turnilo-application/turnilo-application.tsx index d62aa78ba..73f09c6c4 100644 --- a/src/client/applications/turnilo-application/turnilo-application.tsx +++ b/src/client/applications/turnilo-application/turnilo-application.tsx @@ -74,7 +74,7 @@ export class TurniloApplication extends React.Component = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) => +export const AutoRefreshMenu: React.FunctionComponent = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) => = ({ title }) => { +export const BubbleTitle: React.FunctionComponent = ({ title }) => { const minWidth = clamp(title.length * PER_LETTER_PIXELS, MIN_TITLE_WIDTH, MAX_TITLE_WIDTH); return
{title}
; }; diff --git a/src/client/components/clearable-input/clearable-input.tsx b/src/client/components/clearable-input/clearable-input.tsx index 3ffaddcd1..56527f8bd 100644 --- a/src/client/components/clearable-input/clearable-input.tsx +++ b/src/client/components/clearable-input/clearable-input.tsx @@ -36,7 +36,7 @@ export interface ClearableInputProps { onBlur?: React.FocusEventHandler; } -export const ClearableInput: React.SFC = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => { +export const ClearableInput: React.FunctionComponent = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => { const change = (e: React.ChangeEvent) => onChange(e.target.value); const clear = () => onChange(""); diff --git a/src/client/components/color-legend/color-legend.tsx b/src/client/components/color-legend/color-legend.tsx index adcd36f4f..400f50082 100644 --- a/src/client/components/color-legend/color-legend.tsx +++ b/src/client/components/color-legend/color-legend.tsx @@ -37,7 +37,7 @@ const stripeWidth = 30; const stripeHeight = 200; const panelWidth = 100; -export const ColorLegend: React.SFC = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => { +export const ColorLegend: React.FunctionComponent = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => { const [min, max] = colorScale.domain(); if (isNaN(min) || isNaN(max)) return null; diff --git a/src/client/components/color-swabs/color-swabs.tsx b/src/client/components/color-swabs/color-swabs.tsx index 05dcdddc1..6790a70a8 100644 --- a/src/client/components/color-swabs/color-swabs.tsx +++ b/src/client/components/color-swabs/color-swabs.tsx @@ -22,7 +22,7 @@ interface ColorSwabsProps { colorEntries: ColorEntry[]; } -export const ColorSwabs: React.SFC = ({ colorEntries }) => { +export const ColorSwabs: React.FunctionComponent = ({ colorEntries }) => { const colorSwabs = colorEntries.map(({ color, name, value, previous, delta }: ColorEntry) => { const swabStyle = { background: color }; return diff --git a/src/client/components/date-range-input/date-range-input.tsx b/src/client/components/date-range-input/date-range-input.tsx index 0b6173f8d..d12c26bb7 100644 --- a/src/client/components/date-range-input/date-range-input.tsx +++ b/src/client/components/date-range-input/date-range-input.tsx @@ -45,7 +45,7 @@ export class DateRangeInput extends React.Component = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => { +export const DebugMenu: React.FunctionComponent = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => { const isNativeCluster = dataCube.clusterName === "native"; diff --git a/src/client/components/delta/delta.tsx b/src/client/components/delta/delta.tsx index 00b4d592d..0f035eb6a 100644 --- a/src/client/components/delta/delta.tsx +++ b/src/client/components/delta/delta.tsx @@ -76,7 +76,7 @@ export interface DeltaProps { lowerIsBetter?: boolean; } -export const Delta: React.SFC = ({ lowerIsBetter, currentValue, previousValue, formatter }) => { +export const Delta: React.FunctionComponent = ({ lowerIsBetter, currentValue, previousValue, formatter }) => { const formattedDelta = formatDelta(currentValue, previousValue); if (formattedDelta === null) { return -; diff --git a/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx b/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx index 17e700a13..c97f70962 100644 --- a/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx +++ b/src/client/components/dimension-actions-menu/dimension-actions-menu.tsx @@ -44,7 +44,7 @@ export interface DimensionActionsProps { addPartialFilter: (dimension: Dimension) => void; } -export const DimensionActionsMenu: React.SFC = +export const DimensionActionsMenu: React.FunctionComponent = (props: DimensionActionsMenuProps & DimensionActionsProps) => { const { addPartialFilter, clicker, essence, direction, containerStage, openOn, dimension, onClose } = props; return ; }; -export const DimensionActions: React.SFC = (props: DimensionActionsProps) => { +export const DimensionActions: React.FunctionComponent = (props: DimensionActionsProps) => { const { onClose, addPartialFilter, clicker, essence: { splits, filter }, dimension } = props; if (!dimension) return null; diff --git a/src/client/components/dimension-list-tile/dimension-item.tsx b/src/client/components/dimension-list-tile/dimension-item.tsx index 5bc23f09e..548ef857d 100644 --- a/src/client/components/dimension-list-tile/dimension-item.tsx +++ b/src/client/components/dimension-list-tile/dimension-item.tsx @@ -39,7 +39,7 @@ export interface DimensionItemProps { export type DimensionClickHandler = (dimensionName: string, e: MouseEvent) => void; export type DimensionDragStartHandler = (dimensionName: string, e: DragEvent) => void; -export const DimensionItem: React.SFC = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => { +export const DimensionItem: React.FunctionComponent = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => { const infoBubbleClassName = "info-icon"; const className = classNames(DIMENSION_CLASS_NAME, { selected }); diff --git a/src/client/components/drag-indicator/drag-indicator.tsx b/src/client/components/drag-indicator/drag-indicator.tsx index 24a8aba82..2ba4ae458 100644 --- a/src/client/components/drag-indicator/drag-indicator.tsx +++ b/src/client/components/drag-indicator/drag-indicator.tsx @@ -27,7 +27,7 @@ interface DragIndicatorProps { dragPosition?: DragPosition; } -export const DragIndicator: React.SFC = props => { +export const DragIndicator: React.FunctionComponent = props => { const { dragPosition, dragOver, drop, dragLeave } = props; if (!dragPosition) return null; return diff --git a/src/client/components/filter-menu/filter-menu.tsx b/src/client/components/filter-menu/filter-menu.tsx index eaa748414..75d04451e 100644 --- a/src/client/components/filter-menu/filter-menu.tsx +++ b/src/client/components/filter-menu/filter-menu.tsx @@ -43,7 +43,7 @@ export interface FilterMenuProps { onClose: Fn; } -export const FilterMenu: React.SFC = ({ dimension, ...props }: FilterMenuProps) => { +export const FilterMenu: React.FunctionComponent = ({ dimension, ...props }: FilterMenuProps) => { if (!dimension) return null; switch (dimension.kind) { case "time": diff --git a/src/client/components/filter-menu/number-filter-menu/number-filter-menu.tsx b/src/client/components/filter-menu/number-filter-menu/number-filter-menu.tsx index 642c9845a..7acd7c554 100644 --- a/src/client/components/filter-menu/number-filter-menu/number-filter-menu.tsx +++ b/src/client/components/filter-menu/number-filter-menu/number-filter-menu.tsx @@ -73,7 +73,7 @@ export class NumberFilterMenu extends React.Component = props => { +const TabSelector: React.FunctionComponent = props => { const { selectedTab, onTabSelect } = props; const tabs = [TimeFilterTab.RELATIVE, TimeFilterTab.FIXED].map(tab => { return { diff --git a/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx b/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx index 20d31c2d8..c54020345 100644 --- a/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx +++ b/src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx @@ -65,7 +65,7 @@ function presets(dimension: TimeDimension): Array> { ]; } -export const TimeShiftSelector: React.SFC = props => { +export const TimeShiftSelector: React.FunctionComponent = props => { const { onShiftChange, dimension, shift: selectedTimeShift } = props; const timeShiftPreview = timeShiftPreviewForRange(props); diff --git a/src/client/components/filter-tile/add-filter.tsx b/src/client/components/filter-tile/add-filter.tsx index c7b00a15d..10fbfe0ab 100644 --- a/src/client/components/filter-tile/add-filter.tsx +++ b/src/client/components/filter-tile/add-filter.tsx @@ -28,7 +28,7 @@ interface AddFilterProps { essence: Essence; } -export const AddFilter: React.SFC = props => { +export const AddFilter: React.FunctionComponent = props => { const { appendFilter, menuStage, essence: { filter, dataCube } } = props; const tiles = allDimensions(dataCube.dimensions) .filter(dimension => !filter.getClauseForDimension(dimension)) diff --git a/src/client/components/filter-tile/filter-tile.tsx b/src/client/components/filter-tile/filter-tile.tsx index e0103f355..c123c7dc6 100644 --- a/src/client/components/filter-tile/filter-tile.tsx +++ b/src/client/components/filter-tile/filter-tile.tsx @@ -80,7 +80,7 @@ interface FilterTileProps { export const FILTER_CLASS_NAME = "filter"; -export const FilterTile: React.SFC = props => { +export const FilterTile: React.FunctionComponent = props => { const { clause, open, diff --git a/src/client/components/filter-tile/filter-tiles.tsx b/src/client/components/filter-tile/filter-tiles.tsx index 13b96ee07..44e779eeb 100644 --- a/src/client/components/filter-tile/filter-tiles.tsx +++ b/src/client/components/filter-tile/filter-tiles.tsx @@ -54,7 +54,7 @@ interface FilterTilesProps { openOverflowMenu: Fn; } -export const FilterTiles: React.SFC = props => { +export const FilterTiles: React.FunctionComponent = props => { const { menuStage, maxItems, diff --git a/src/client/components/filter-tile/partial-filter-tile.tsx b/src/client/components/filter-tile/partial-filter-tile.tsx index 597846182..68041d15f 100644 --- a/src/client/components/filter-tile/partial-filter-tile.tsx +++ b/src/client/components/filter-tile/partial-filter-tile.tsx @@ -41,7 +41,7 @@ interface PartialFilterTileProps { closeItem: Fn; } -export const PartialFilterTile: React.SFC = props => { +export const PartialFilterTile: React.FunctionComponent = props => { const { closeItem, saveClause, essence, timekeeper, locale, clicker, stage, dimension, style } = props; return {({ ref: openOn, setRef }) =>
= ({ stage, tickLength }) => { +export const BottomBorder: React.FunctionComponent = ({ stage, tickLength }) => { return = ({ stage }) => { +export const RightBorder: React.FunctionComponent = ({ stage }) => { return = props => { +export const GridLines: React.FunctionComponent = props => { const { orientation, stage, ticks, scale } = props; return diff --git a/src/client/components/header-bar/header-bar.tsx b/src/client/components/header-bar/header-bar.tsx index b1ac189ae..c8776248b 100644 --- a/src/client/components/header-bar/header-bar.tsx +++ b/src/client/components/header-bar/header-bar.tsx @@ -24,7 +24,7 @@ export interface HeaderBarProps { title?: string; } -export const HeaderBar: React.SFC = props => { +export const HeaderBar: React.FunctionComponent = props => { const { customization, title } = props; const headerStyle: React.CSSProperties = customization && customization.headerBackground && { background: customization.headerBackground }; diff --git a/src/client/components/highlight-modal/highlight-modal.tsx b/src/client/components/highlight-modal/highlight-modal.tsx index f410d94fc..83842fc12 100644 --- a/src/client/components/highlight-modal/highlight-modal.tsx +++ b/src/client/components/highlight-modal/highlight-modal.tsx @@ -30,7 +30,7 @@ interface HighlightModalProps { acceptHighlight: Fn; } -export const HighlightModal: React.SFC = ({ title, children, left, top, acceptHighlight, dropHighlight }) => +export const HighlightModal: React.FunctionComponent = ({ title, children, left, top, acceptHighlight, dropHighlight }) =>
{children}
diff --git a/src/client/components/highlight-string/highlight-string.tsx b/src/client/components/highlight-string/highlight-string.tsx index bc82db54b..6ae93f276 100644 --- a/src/client/components/highlight-string/highlight-string.tsx +++ b/src/client/components/highlight-string/highlight-string.tsx @@ -48,6 +48,6 @@ function highlightBy(text: string, highlight: string | RegExp): string | JSX.Ele return highlightByIndex(text, startIndex, startIndex + match[0].length); } -export const HighlightString: React.SFC = ({ className, text, highlight }) => { +export const HighlightString: React.FunctionComponent = ({ className, text, highlight }) => { return {highlightBy(text, highlight)}; }; diff --git a/src/client/components/input-with-presets/string-input-with-presets.tsx b/src/client/components/input-with-presets/string-input-with-presets.tsx index a258a6ba5..471bf84ce 100644 --- a/src/client/components/input-with-presets/string-input-with-presets.tsx +++ b/src/client/components/input-with-presets/string-input-with-presets.tsx @@ -20,5 +20,5 @@ import { InputWithPresets, InputWithPresetsProps } from "./input-with-presets"; type StringInputWithPresetsProps = Omit, "parseCustomValue" | "formatCustomValue">; -export const StringInputWithPresets: React.SFC = props => +export const StringInputWithPresets: React.FunctionComponent = props => {...props} parseCustomValue={identity} formatCustomValue={identity} />; diff --git a/src/client/components/markdown-node/markdown-node.tsx b/src/client/components/markdown-node/markdown-node.tsx index 4e6b9ac4f..9717aa499 100644 --- a/src/client/components/markdown-node/markdown-node.tsx +++ b/src/client/components/markdown-node/markdown-node.tsx @@ -26,7 +26,7 @@ function innerMarkdown(input: string): { __html: string } { return { __html: snarkdown(input) }; } -export const MarkdownNode: React.SFC = ({ markdown }) => { +export const MarkdownNode: React.FunctionComponent = ({ markdown }) => { return
; diff --git a/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx b/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx index cc3ed2029..36cc11b16 100644 --- a/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx +++ b/src/client/components/measure-actions-menu/add-arithmetic-operation.tsx @@ -31,7 +31,7 @@ interface AddPercentSeriesButtonProps { onClose: Fn; } -export const AddArithmeticOperationButton: React.SFC = props => { +export const AddArithmeticOperationButton: React.FunctionComponent = props => { const { measure, addPartialSeries, onClose } = props; function onNewOperation() { diff --git a/src/client/components/measure-actions-menu/add-measure-series.tsx b/src/client/components/measure-actions-menu/add-measure-series.tsx index b3f497719..1bc677f99 100644 --- a/src/client/components/measure-actions-menu/add-measure-series.tsx +++ b/src/client/components/measure-actions-menu/add-measure-series.tsx @@ -32,7 +32,7 @@ interface AddMeasureSeriesButtonProps { onClose: Fn; } -export const AddMeasureSeriesButton: React.SFC = props => { +export const AddMeasureSeriesButton: React.FunctionComponent = props => { const { series, measure, onClose, addSeries } = props; const measureDisabled = series.hasMeasure(measure); diff --git a/src/client/components/measure-actions-menu/add-percent-series.tsx b/src/client/components/measure-actions-menu/add-percent-series.tsx index 3e26b3310..b9b7f48d8 100644 --- a/src/client/components/measure-actions-menu/add-percent-series.tsx +++ b/src/client/components/measure-actions-menu/add-percent-series.tsx @@ -39,7 +39,7 @@ interface AddPercentSeriesButtonProps { onClose: Fn; } -export const AddPercentSeriesButton: React.SFC = props => { +export const AddPercentSeriesButton: React.FunctionComponent = props => { const { series, measure, addSeries, onClose } = props; const percentSeries: Set = series diff --git a/src/client/components/measure-actions-menu/add-quantile-series.tsx b/src/client/components/measure-actions-menu/add-quantile-series.tsx index 62424b788..3ca3d2a07 100644 --- a/src/client/components/measure-actions-menu/add-quantile-series.tsx +++ b/src/client/components/measure-actions-menu/add-quantile-series.tsx @@ -33,7 +33,7 @@ interface AddQuantileSeriesButtonProps { onClose: Fn; } -export const AddQuantileSeriesButton: React.SFC = props => { +export const AddQuantileSeriesButton: React.FunctionComponent = props => { const { series, measure, addPartialSeries, addSeries, onClose } = props; function onNewQuantileSeries() { diff --git a/src/client/components/measure-actions-menu/measure-actions-menu.tsx b/src/client/components/measure-actions-menu/measure-actions-menu.tsx index 69b6374b8..6324f4fb1 100644 --- a/src/client/components/measure-actions-menu/measure-actions-menu.tsx +++ b/src/client/components/measure-actions-menu/measure-actions-menu.tsx @@ -47,7 +47,7 @@ export interface MeasureActionsProps { onClose: Fn; } -export const MeasureActionsMenu: React.SFC = props => { +export const MeasureActionsMenu: React.FunctionComponent = props => { const { direction, containerStage, openOn, measure, onClose } = props; if (!measure) return null; diff --git a/src/client/components/measure-bubble-content/measure-bubble-content.tsx b/src/client/components/measure-bubble-content/measure-bubble-content.tsx index 9bf562657..d015b3259 100644 --- a/src/client/components/measure-bubble-content/measure-bubble-content.tsx +++ b/src/client/components/measure-bubble-content/measure-bubble-content.tsx @@ -26,7 +26,7 @@ export interface MeasureBubbleContentProps { lowerIsBetter?: boolean; } -export const MeasureBubbleContent: React.SFC = ({ lowerIsBetter, formatter, current, previous }) => { +export const MeasureBubbleContent: React.FunctionComponent = ({ lowerIsBetter, formatter, current, previous }) => { const currentValue = formatter(current); const previousValue = formatter(previous); return diff --git a/src/client/components/measures-tile/measure-item.tsx b/src/client/components/measures-tile/measure-item.tsx index 90e01101a..66a05b91f 100644 --- a/src/client/components/measures-tile/measure-item.tsx +++ b/src/client/components/measures-tile/measure-item.tsx @@ -36,7 +36,7 @@ export interface MeasureItemProps { searchText: string; } -export const MeasureItem: React.SFC = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => { +export const MeasureItem: React.FunctionComponent = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => { const infoBubbleClassName = "measure-info-icon"; const handleClick = (e: MouseEvent) => { diff --git a/src/client/components/message-card/message-card.tsx b/src/client/components/message-card/message-card.tsx index 10b5bdf70..36919924f 100644 --- a/src/client/components/message-card/message-card.tsx +++ b/src/client/components/message-card/message-card.tsx @@ -21,7 +21,7 @@ interface MessageCardProps { title: string; } -export const MessageCard: React.SFC = props => { +export const MessageCard: React.FunctionComponent = props => { const { title, children } = props; return
{title}
diff --git a/src/client/components/message-panel/message-panel.tsx b/src/client/components/message-panel/message-panel.tsx index 0b870487e..b3085042b 100644 --- a/src/client/components/message-panel/message-panel.tsx +++ b/src/client/components/message-panel/message-panel.tsx @@ -24,7 +24,7 @@ interface ErrorViewActionProps { label: string; } -export const MessagePanelAction: React.SFC = ({ action, label }) => +export const MessagePanelAction: React.FunctionComponent = ({ action, label }) =>
+ return +
+ {header} + + + {source} + + +
+
- ; - } -} +
+ ; +}; diff --git a/src/client/modals/url-shortener-modal/url-shortener-modal.tsx b/src/client/modals/url-shortener-modal/url-shortener-modal.tsx index 979028be7..0362aabfd 100644 --- a/src/client/modals/url-shortener-modal/url-shortener-modal.tsx +++ b/src/client/modals/url-shortener-modal/url-shortener-modal.tsx @@ -30,7 +30,7 @@ interface UrlProp { url: string; } -export const UrlShortenerModal: React.SFC = ({ title, onClose, url }) => { +export const UrlShortenerModal: React.FunctionComponent = ({ title, onClose, url }) => { return View definition for mkurl ; -export const ViewDefinitionModal: React.SFC = ({ essence, onClose }) => { +export const ViewDefinitionModal: React.FunctionComponent = ({ essence, onClose }) => { const viewDefinition = { dataCubeName: essence.dataCube.name, diff --git a/src/client/oauth/oauth-message-view.tsx b/src/client/oauth/oauth-message-view.tsx index ebe33f880..6c7592d72 100644 --- a/src/client/oauth/oauth-message-view.tsx +++ b/src/client/oauth/oauth-message-view.tsx @@ -23,7 +23,7 @@ interface OauthMessageViewProps { oauth: OauthEnabled; } -export const OauthMessageView: React.SFC = ({ oauth }) => { +export const OauthMessageView: React.FunctionComponent = ({ oauth }) => { return login(oauth)} label={"Login"} /> diff --git a/src/client/utils/teleporter/teleporter.tsx b/src/client/utils/teleporter/teleporter.tsx index 1b0e3e8e8..3af456071 100644 --- a/src/client/utils/teleporter/teleporter.tsx +++ b/src/client/utils/teleporter/teleporter.tsx @@ -29,7 +29,7 @@ interface SourceState { interface Teleporter { Source: typeof React.Component; - Target: React.SFC<{}>; + Target: React.FunctionComponent<{}>; } export function createTeleporter(): Teleporter { @@ -42,7 +42,7 @@ export function createTeleporter(): Teleporter { } } - const Target: React.SFC<{}> = () =>
; + const Target: React.FunctionComponent<{}> = () =>
; class Source extends React.Component<{}, SourceState> { diff --git a/src/client/views/cube-view/center-panel/center-panel.tsx b/src/client/views/cube-view/center-panel/center-panel.tsx index 268e10e74..580726e8a 100644 --- a/src/client/views/cube-view/center-panel/center-panel.tsx +++ b/src/client/views/cube-view/center-panel/center-panel.tsx @@ -58,11 +58,11 @@ interface VisualizationControlsProps extends VisualizationControlsBaseProps { splitTilesRow: React.ComponentType; } -export const DefaultVisualizationControls: React.SFC = props => { +export const DefaultVisualizationControls: React.FunctionComponent = props => { return ; }; -export const VisualizationControls: React.SFC = props => { +export const VisualizationControls: React.FunctionComponent = props => { const { splitTilesRow: SplitTilesRow, addSeries, @@ -116,7 +116,7 @@ interface ChartPanelProps { drop: Unary, void>; } -export const ChartPanel: React.SFC = props => { +export const ChartPanel: React.FunctionComponent = props => { const { chartComponent, queryFactory, diff --git a/src/client/views/cube-view/cube-header-bar/cube-header-bar.tsx b/src/client/views/cube-view/cube-header-bar/cube-header-bar.tsx index f58b3f46a..cd188ab12 100644 --- a/src/client/views/cube-view/cube-header-bar/cube-header-bar.tsx +++ b/src/client/views/cube-view/cube-header-bar/cube-header-bar.tsx @@ -75,7 +75,7 @@ export class CubeHeaderBar extends React.Component { diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx index 7a5d7e30d..ed0270fa3 100644 --- a/src/client/views/cube-view/cube-view.tsx +++ b/src/client/views/cube-view/cube-view.tsx @@ -62,7 +62,7 @@ import "./cube-view.scss"; import { DownloadableDatasetProvider } from "./downloadable-dataset-context"; import { PartialTilesProvider } from "./partial-tiles-provider"; -const ToggleArrow: React.SFC<{ right: boolean }> = ({ right }) => +const ToggleArrow: React.FunctionComponent<{ right: boolean }> = ({ right }) => right ? : ; @@ -223,7 +223,7 @@ export class CubeView extends React.Component { }); }; - componentWillMount() { + UNSAFE_componentWillMount() { const { hash, dataCube, initTimekeeper } = this.props; if (!dataCube) { throw new Error("Data cube is required."); @@ -241,7 +241,7 @@ export class CubeView extends React.Component { this.globalResizeListener(); } - componentWillReceiveProps(nextProps: CubeViewProps) { + UNSAFE_componentWillReceiveProps(nextProps: CubeViewProps) { const { hash, dataCube } = this.props; if (!nextProps.dataCube) { throw new Error("Data cube is required."); @@ -252,7 +252,7 @@ export class CubeView extends React.Component { } } - componentWillUpdate(nextProps: CubeViewProps, nextState: CubeViewState): void { + UNSAFE_componentWillUpdate(nextProps: CubeViewProps, nextState: CubeViewState): void { const { changeCubeAndEssence, dataCube } = this.props; const { essence } = this.state; if (!nextState.essence.equals(essence)) { diff --git a/src/client/views/error-view/general-error.tsx b/src/client/views/error-view/general-error.tsx index 9295f5ce3..b4163b715 100644 --- a/src/client/views/error-view/general-error.tsx +++ b/src/client/views/error-view/general-error.tsx @@ -26,7 +26,7 @@ interface GeneralErrorProps { errorId: string | null; } -export const GeneralError: React.SFC = ({ errorId }) => { +export const GeneralError: React.FunctionComponent = ({ errorId }) => { const message = errorId !== null ? recordedErrorMsg(errorId) : defaultErrorMsg; return diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx index 66e27ca4a..1b8486eb3 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx @@ -47,7 +47,7 @@ interface BarChartProps { acceptHighlight: Nullary; } -export const BarChart: React.SFC = props => { +export const BarChart: React.FunctionComponent = props => { const { dataset, essence, stage, highlight, acceptHighlight, dropHighlight, saveHighlight } = props; const { [SPLIT]: split, ...totals } = selectMainDatum(dataset); const model = create(essence, dataset); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx index 646183f57..5f5d7f145 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar-charts/bar-charts.tsx @@ -37,7 +37,7 @@ interface BarChartsProps { xScale: XScale; } -export const BarCharts: React.SFC = props => { +export const BarCharts: React.FunctionComponent = props => { const { dropHighlight, acceptHighlight, interaction, model, datums, xScale, scrollLeft, stage, totals } = props; const seriesList = model.series.toArray(); return diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx index 630ea8923..657d521da 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx @@ -31,7 +31,7 @@ interface SingleBarProps { model: BaseBarChartModel; } -export const SingleBar: React.SFC = props => { +export const SingleBar: React.FunctionComponent = props => { const { datum, xScale, yScale, model: { continuousSplit }, series } = props; const [maxHeight] = yScale.range(); const x = continuousSplit.selectValue(datum); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx index c94a1d36a..eb08eb7a9 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx @@ -31,7 +31,7 @@ interface SingleTimeShiftBar { model: BaseBarChartModel; } -export const SingleTimeShiftBar: React.SFC = props => { +export const SingleTimeShiftBar: React.FunctionComponent = props => { const { datum, xScale, yScale, model: { continuousSplit }, series } = props; const [maxHeight] = yScale.range(); const x = continuousSplit.selectValue(datum); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx index 2b8a11bd9..01afd35d3 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx @@ -33,7 +33,7 @@ interface StackedBarProps { series: ConcreteSeries; } -export const StackedBar: React.SFC = props => { +export const StackedBar: React.FunctionComponent = props => { const { datum, xScale, yScale, series, model: { colors, continuousSplit, nominalSplit } } = props; const datums = selectSplitDatums(datum); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx index 6d8c24332..9a4a631c0 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx @@ -34,7 +34,7 @@ interface StackedTimeShiftBarProps { series: ConcreteSeries; } -export const StackedTimeShiftBar: React.SFC = props => { +export const StackedTimeShiftBar: React.FunctionComponent = props => { const { datum, xScale, yScale, series, model: { nominalSplit, continuousSplit, colors } } = props; const datums = selectSplitDatums(datum); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx index 49be9d82c..548600a1b 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/background.tsx @@ -26,7 +26,7 @@ interface BackgroundProps { yScale: LinearScale; } -export const Background: React.SFC = props => { +export const Background: React.FunctionComponent = props => { const { gridStage, yScale } = props; const ticks = pickTicks(yScale); return diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx index de09d2997..29bea938b 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx @@ -36,7 +36,7 @@ interface BarProps { series: ConcreteSeries; } -const Bar: React.SFC = props => { +const Bar: React.FunctionComponent = props => { const { model, ...rest } = props; const showPrevious = model.hasComparison; if (isStacked(model)) { @@ -57,7 +57,7 @@ interface BarsProps { datums: Datum[]; } -export const Bars: React.SFC = props => { +export const Bars: React.FunctionComponent = props => { const { model, stage, xScale, series, datums } = props; const extent = yExtent(datums, series, model.hasComparison); const yScale = getScale(extent, stage.height); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx index 2ec674d6b..2c9447e60 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx @@ -38,7 +38,7 @@ interface ForegroundProps { stage: Stage; } -export const Foreground: React.SFC = props => { +export const Foreground: React.FunctionComponent = props => { const { stage, dropHighlight, acceptHighlight, container, model, series, xScale, yScale, interaction } = props; const rect = container.current.getBoundingClientRect(); return diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx index 6d2211bd8..75d94ca96 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx @@ -35,7 +35,7 @@ interface HighlightModalProps { rect: ClientRect | DOMRect; } -export const HighlightModal: React.SFC = props => { +export const HighlightModal: React.FunctionComponent = props => { const { model: { timezone, continuousSplit }, rect: { left, top }, diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx index 43080cc37..6ed6daf0b 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx @@ -42,7 +42,7 @@ function getYValue(datum: Datum, series: ConcreteSeries, includePrevious: boolea return Math.max(series.selectValue(datum), series.selectValue(datum, SeriesDerivation.PREVIOUS)); } -export const HighlightOverlay: React.SFC = props => { +export const HighlightOverlay: React.FunctionComponent = props => { const { stage, yScale, series, xScale, model: { hasComparison, continuousSplit }, interaction: { datum } } = props; const xValue = continuousSplit.selectValue(datum); const left = xScale.calculate(xValue); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx index 239f871f8..00e1ba584 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/hover-tooltip.tsx @@ -33,7 +33,7 @@ interface HoverTooltipProps { rect: ClientRect | DOMRect; } -export const HoverTooltip: React.SFC = props => { +export const HoverTooltip: React.FunctionComponent = props => { const { model, rect: { left, top }, diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx index c4dd2c1dc..6fed4f67e 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/hover-tooltip/tooltip-content.tsx @@ -44,7 +44,7 @@ function colorEntries(datum: Datum, series: ConcreteSeries, model: StackedBarCha }); } -export const Content: React.SFC = props => { +export const Content: React.FunctionComponent = props => { const { model, series, datum } = props; if (isStacked(model)) { const entries = colorEntries(datum, series, model); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx index 25f4483fe..4e99f771e 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/legend/Legend.tsx @@ -26,7 +26,7 @@ interface LegendValuesProps { colors: StackedBarChartModel["colors"]; } -const LegendValues: React.SFC = ({ colors }) => { +const LegendValues: React.FunctionComponent = ({ colors }) => { return
@@ -46,7 +46,7 @@ const LegendValues: React.SFC = ({ colors }) => { ; }; -export const Legend: React.SFC = props => { +export const Legend: React.FunctionComponent = props => { const { model: { nominalSplit, nominalDimension, colors } } = props; const title = nominalSplit.getTitle(nominalDimension); diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx index 5e90c02de..97a795739 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/spacer/spacer.tsx @@ -17,6 +17,6 @@ import React from "react"; import "./spacer.scss"; -export const Spacer: React.SFC<{}> = props => { +export const Spacer: React.FunctionComponent<{}> = props => { return
; }; diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx index fe46f2907..4f93b8e73 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/x-axis/x-axis.tsx @@ -40,7 +40,7 @@ function calculateTicks(domain: XDomain, { continuousSplit }: BarChartModel): Do return domain; } -export const XAxis: React.SFC = props => { +export const XAxis: React.FunctionComponent = props => { const { model, stage, scale } = props; const ticks = calculateTicks(scale.domain(), model); return diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx index 87ff7910f..855603add 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/single-y-axis.tsx @@ -28,7 +28,7 @@ interface SingleYAxisProps { stage: Stage; } -export const SingleYAxis: React.SFC = props => { +export const SingleYAxis: React.FunctionComponent = props => { const { scale, series, stage } = props; return
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx index de104570a..c8e0580b1 100644 --- a/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx +++ b/src/client/visualizations/bar-chart/improved-bar-chart/y-axis/y-axis.tsx @@ -29,7 +29,7 @@ interface YAxisProps { model: BarChartModel; } -export const YAxis: React.SFC = props => { +export const YAxis: React.FunctionComponent = props => { const { model, stage, datums } = props; const axisStage = calculateYAxisStage(stage); const seriesList = model.series.toArray(); diff --git a/src/client/visualizations/data-provider/data-provider.tsx b/src/client/visualizations/data-provider/data-provider.tsx index e32e15f52..d76133751 100644 --- a/src/client/visualizations/data-provider/data-provider.tsx +++ b/src/client/visualizations/data-provider/data-provider.tsx @@ -67,7 +67,7 @@ export class DataProvider extends React.Component = props => { +export const GridSplitMenu: React.FunctionComponent = props => { const { essence, split, dimension } = props; const controlSplit = split.equals(mainSplit(essence)); if (controlSplit) { diff --git a/src/client/visualizations/grid/grid-split-tile.tsx b/src/client/visualizations/grid/grid-split-tile.tsx index ba1230597..6b83f46e4 100644 --- a/src/client/visualizations/grid/grid-split-tile.tsx +++ b/src/client/visualizations/grid/grid-split-tile.tsx @@ -23,7 +23,7 @@ import { classNames } from "../../utils/dom/dom"; import { GridSplitMenu } from "./grid-split-menu"; import { mainSplit } from "./utils/main-split"; -export const GridSplitTile: React.SFC = props => { +export const GridSplitTile: React.FunctionComponent = props => { const { essence, open: isOpened, split, dimension, style, removeSplit, updateSplit, openMenu, closeMenu, dragStart, containerStage } = props; const enabled = split.equals(mainSplit(essence)) || isContinuous(dimension); diff --git a/src/client/visualizations/grid/grid.tsx b/src/client/visualizations/grid/grid.tsx index 72f77be18..37961457c 100644 --- a/src/client/visualizations/grid/grid.tsx +++ b/src/client/visualizations/grid/grid.tsx @@ -31,7 +31,7 @@ interface GridProps extends ChartProps { segmentWidth: number; } -const Grid: React.SFC = props => { +const Grid: React.FunctionComponent = props => { const { essence, segmentWidth, setSegmentWidth, stage, clicker, data } = props; const availableWidth = stage.width - MIN_DIMENSION_WIDTH; diff --git a/src/client/visualizations/grid/scrolled-grid.tsx b/src/client/visualizations/grid/scrolled-grid.tsx index 59173083a..4ba5021fe 100644 --- a/src/client/visualizations/grid/scrolled-grid.tsx +++ b/src/client/visualizations/grid/scrolled-grid.tsx @@ -47,7 +47,7 @@ interface ScrolledGridProps { scrollTop: number; } -export const ScrolledGrid: React.SFC = props => { +export const ScrolledGrid: React.FunctionComponent = props => { const { essence, data, diff --git a/src/client/visualizations/grid/split-labels.tsx b/src/client/visualizations/grid/split-labels.tsx index 194ad7ba0..f8f9b65ab 100644 --- a/src/client/visualizations/grid/split-labels.tsx +++ b/src/client/visualizations/grid/split-labels.tsx @@ -28,7 +28,7 @@ interface SplitLabelsProps { datum: Datum; } -export const SplitLabels: React.SFC = props => { +export const SplitLabels: React.FunctionComponent = props => { const { splits, datum, timezone } = props; if (isTotalDatum(datum)) { return
Total
; diff --git a/src/client/visualizations/grid/visualization-controls.tsx b/src/client/visualizations/grid/visualization-controls.tsx index 6e1822344..5d630fe50 100644 --- a/src/client/visualizations/grid/visualization-controls.tsx +++ b/src/client/visualizations/grid/visualization-controls.tsx @@ -22,6 +22,6 @@ function GridSplitTilesRow(props: SplitTilesRowBaseProps) { return ; } -export const GridVisualizationControls: React.SFC = props => { +export const GridVisualizationControls: React.FunctionComponent = props => { return ; }; diff --git a/src/client/visualizations/heat-map/heatmap-corner.tsx b/src/client/visualizations/heat-map/heatmap-corner.tsx index 03506b35a..d7b4ff5f4 100644 --- a/src/client/visualizations/heat-map/heatmap-corner.tsx +++ b/src/client/visualizations/heat-map/heatmap-corner.tsx @@ -29,7 +29,7 @@ const labelMargin = 20; // Around half of font-size with handpicked offset to accommodate rounding errors and rotation artifacts const rotationAxisOffset = 7; -export const HeatmapCorner: React.SFC = ({ width, height, essence }) => { +export const HeatmapCorner: React.FunctionComponent = ({ width, height, essence }) => { const { dataCube, splits: { splits } } = essence; const row = splits.get(0); diff --git a/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx b/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx index c69ded0d0..52bfd4878 100644 --- a/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx +++ b/src/client/visualizations/heat-map/heatmap-highlight-indicator.tsx @@ -24,7 +24,7 @@ interface RowHighlightProps { tileSize: number; } -const RowHighlight: React.SFC = props => { +const RowHighlight: React.FunctionComponent = props => { const { row, width, tileSize } = props; const top = row * tileSize; return
= props => { +const ColumnHighlight: React.FunctionComponent = props => { const { column, tileSize, height, tileGap } = props; const left = column * tileSize + tileGap; return
= props => { +export const HeatmapHighlightIndicator: React.FunctionComponent = props => { const { position: { row, column }, width, height, tileGap, tileSize } = props; return diff --git a/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx b/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx index 2e6c60da4..5779d75ce 100644 --- a/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx +++ b/src/client/visualizations/heat-map/heatmap-highlight-modal.tsx @@ -32,7 +32,7 @@ export interface HeatmapHighlightModalProps { acceptHighlight: Fn; } -export const HeatmapHighlightModal: React.SFC = props => { +export const HeatmapHighlightModal: React.FunctionComponent = props => { const { title, children, acceptHighlight, dropHighlight } = props; return = ({ tileGap, tileSize, hoverPosition }) => { +export const HeatmapHoverIndicator: React.FunctionComponent = ({ tileGap, tileSize, hoverPosition }) => { const { column, row } = hoverPosition; const top = row * tileSize; const left = column * tileSize + tileGap; diff --git a/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx b/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx index 9843d3f14..89b34edbe 100644 --- a/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx +++ b/src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx @@ -31,7 +31,7 @@ interface HeatmapHoverTooltip { scroll: { left: number, top: number }; } -export const HeatmapHoverTooltip: React.SFC = props => { +export const HeatmapHoverTooltip: React.FunctionComponent = props => { const { dataset, essence, scroll, position: { column, row, top, left } } = props; const [, datum] = datumByPosition(dataset, { row, column }); if (!datum) return null; diff --git a/src/client/visualizations/line-chart/base-chart/background/background.tsx b/src/client/visualizations/line-chart/base-chart/background/background.tsx index 9c9ebb582..89a7660fa 100644 --- a/src/client/visualizations/line-chart/base-chart/background/background.tsx +++ b/src/client/visualizations/line-chart/base-chart/background/background.tsx @@ -35,7 +35,7 @@ interface BackgroundProps { formatter: Unary; } -export const Background: React.SFC = props => { +export const Background: React.FunctionComponent = props => { const { formatter, gridStage, axisStage, xScale, yScale, xTicks } = props; return diff --git a/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx b/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx index 307bbc3e3..3ffa0e070 100644 --- a/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx +++ b/src/client/visualizations/line-chart/base-chart/foreground/foreground.tsx @@ -37,7 +37,7 @@ interface ForegroundProps { timezone: Timezone; } -export const Foreground: React.SFC = props => { +export const Foreground: React.FunctionComponent = props => { const { stage, interaction, container, xScale, timezone, visualisationStage, hoverContent, dropHighlight, acceptHighlight } = props; return diff --git a/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx b/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx index 876d17c15..d29e3b549 100644 --- a/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx +++ b/src/client/visualizations/line-chart/base-chart/foreground/highlight-modal.tsx @@ -32,7 +32,7 @@ interface HighlightModalProps { rect: ClientRect | DOMRect; } -export const HighlightModal: React.SFC = props => { +export const HighlightModal: React.FunctionComponent = props => { const { rect: { left, top }, interaction, timezone, dropHighlight, acceptHighlight, xScale } = props; const range = toPlywoodRange(interaction.clause); const x = xScale(range.midpoint()); diff --git a/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx b/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx index bc033752d..f829bb54a 100644 --- a/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx +++ b/src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx @@ -27,7 +27,7 @@ interface HoverGuideProps { xScale: ContinuousScale; } -export const HoverGuide: React.SFC = props => { +export const HoverGuide: React.FunctionComponent = props => { const { stage, hover: { range }, yScale, xScale } = props; const midpoint = range.midpoint(); const x = xScale(midpoint); diff --git a/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx b/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx index 8ce8231ec..c377a93b6 100644 --- a/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx +++ b/src/client/visualizations/line-chart/base-chart/foreground/hover-tooltip.tsx @@ -32,7 +32,7 @@ interface HoverTooltipProps { stage: Stage; } -export const HoverTooltip: React.SFC = props => { +export const HoverTooltip: React.FunctionComponent = props => { const { content, interaction, xScale, timezone, stage } = props; const { range } = interaction; const x = xScale(range.midpoint()); diff --git a/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx b/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx index 21153eb56..5ae44ab30 100644 --- a/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx +++ b/src/client/visualizations/line-chart/base-chart/foreground/selection-overlay.tsx @@ -45,7 +45,7 @@ function getHighlightRange(interaction: Interaction, timezone: Timezone): Contin return null; } -export const SelectionOverlay: React.SFC = props => { +export const SelectionOverlay: React.FunctionComponent = props => { const { stage, timezone, interaction, xScale } = props; const range = getHighlightRange(interaction, timezone); if (!range) return null; diff --git a/src/client/visualizations/line-chart/chart-line/chart-line.tsx b/src/client/visualizations/line-chart/chart-line/chart-line.tsx index b73d2e4f5..8b7defec1 100644 --- a/src/client/visualizations/line-chart/chart-line/chart-line.tsx +++ b/src/client/visualizations/line-chart/chart-line/chart-line.tsx @@ -42,7 +42,7 @@ const stroke = (color: string, dashed: boolean): Pick = props => { +export const ChartLine: React.FunctionComponent = props => { const { color, dashed, getX, getY, dataset, showArea, stage, xScale, yScale } = props; const area = d3.area().y0(yScale(0)); diff --git a/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx index a158350ff..ad92a0722 100644 --- a/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx +++ b/src/client/visualizations/line-chart/chart-line/colored-series-chart-line.tsx @@ -20,6 +20,6 @@ import { SeriesChartLine, SeriesChartLineProps } from "./series-chart-line"; type ColoredSeriesChartLine = Omit & { color: string }; -export const ColoredSeriesChartLine: React.SFC = props => { +export const ColoredSeriesChartLine: React.FunctionComponent = props => { return ; }; diff --git a/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx index 9569ed322..150215a49 100644 --- a/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx +++ b/src/client/visualizations/line-chart/chart-line/series-chart-line.tsx @@ -29,7 +29,7 @@ interface OwnProps { export type SeriesChartLineProps = Pick & OwnProps; -export const SeriesChartLine: React.SFC = props => { +export const SeriesChartLine: React.FunctionComponent = props => { const { showArea, essence, series, getX, stage, dataset, xScale, yScale, color } = props; const getY: Unary = (d: Datum) => readNumber(series.selectValue(d)); diff --git a/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx b/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx index ed4a045a5..8a9ed200c 100644 --- a/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx +++ b/src/client/visualizations/line-chart/chart-line/singleton-series-chart-line.tsx @@ -20,6 +20,6 @@ import { SeriesChartLine, SeriesChartLineProps } from "./series-chart-line"; type SingletonSeriesChartLineProps = Omit; -export const SingletonSeriesChartLine: React.SFC = props => { +export const SingletonSeriesChartLine: React.FunctionComponent = props => { return ; }; diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx index d79276cb6..db44c1fde 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-series/charts-per-series.tsx @@ -36,7 +36,7 @@ interface ChartsPerSeriesProps { stage: Stage; } -export const ChartsPerSeries: React.SFC = props => { +export const ChartsPerSeries: React.FunctionComponent = props => { const { interactions, xScale, xTicks, essence, dataset, stage } = props; const concreteSeries = essence.getConcreteSeries().toArray(); diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx index cbcb1689a..3de5912b3 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx @@ -45,7 +45,7 @@ interface SeriesChartProps { visualisationStage: Stage; } -export const SeriesChart: React.SFC = props => { +export const SeriesChart: React.FunctionComponent = props => { const { chartId, interactions, visualisationStage, chartStage, essence, series, xScale, xTicks, dataset } = props; const hasComparison = essence.hasComparison(); const continuousSplitDataset = selectFirstSplitDataset(dataset); diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx index 96476373f..a17912e2d 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx @@ -74,7 +74,7 @@ interface SeriesHoverContentProps { series: ConcreteSeries; } -export const SeriesHoverContent: React.SFC = props => { +export const SeriesHoverContent: React.FunctionComponent = props => { const { essence, range, series, dataset } = props; if (hasNominalSplit(essence)) { const entries = colorEntries(dataset, range, series, essence); diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx index 47dcb266f..fb56c510d 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-split/charts-per-split.tsx @@ -51,7 +51,7 @@ function getChartsSelectors(essence: Essence, dataset: Dataset): Array = props => { +export const ChartsPerSplit: React.FunctionComponent = props => { const { interactions, xScale, xTicks, essence, dataset, stage } = props; const hasMultipleSeries = essence.series.count() > 1; diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx index 7780b1b88..1d37eec28 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-split/label.tsx @@ -26,7 +26,7 @@ interface LabelProps { datum: Datum; } -export const Label: React.SFC = props => { +export const Label: React.FunctionComponent = props => { const { essence, datum } = props; if (hasNominalSplit(essence)) { const nominalSplit = getNominalSplit(essence); diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx index 1f8626f1b..8e9751b01 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx @@ -46,7 +46,7 @@ interface SplitChartProps { visualisationStage: Stage; } -export const SplitChart: React.SFC = props => { +export const SplitChart: React.FunctionComponent = props => { const { chartId, interactions, visualisationStage, chartStage, essence, xScale, xTicks, selectDatum, dataset } = props; const { interaction } = interactions; const splitDatum = selectDatum(dataset); diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx index dfdac60fb..e63f88b64 100644 --- a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx +++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx @@ -37,7 +37,7 @@ interface ColoredSeriesProps { hasComparison: boolean; } -const ColoredSeries: React.SFC = props => { +const ColoredSeries: React.FunctionComponent = props => { const { datum, hasComparison, series } = props; const colorEntries = series.map((series, index) => { const color = NORMAL_COLORS[index]; @@ -47,7 +47,7 @@ const ColoredSeries: React.SFC = props => { return ; }; -export const SplitHoverContent: React.SFC = props => { +export const SplitHoverContent: React.FunctionComponent = props => { const { essence, dataset, interaction: { range } } = props; const series = essence.getConcreteSeries().toArray(); const hasComparison = essence.hasComparison(); diff --git a/src/client/visualizations/line-chart/charts/charts.tsx b/src/client/visualizations/line-chart/charts/charts.tsx index dbff1c748..c5acba1de 100644 --- a/src/client/visualizations/line-chart/charts/charts.tsx +++ b/src/client/visualizations/line-chart/charts/charts.tsx @@ -35,7 +35,7 @@ interface ChartsProps { stage: Stage; } -export const Charts: React.SFC = props => { +export const Charts: React.FunctionComponent = props => { const { essence } = props; const { groupSeries } = essence.visualizationSettings as ImmutableRecord; diff --git a/src/client/visualizations/line-chart/legend/legend.tsx b/src/client/visualizations/line-chart/legend/legend.tsx index f4607d76d..af7a99667 100644 --- a/src/client/visualizations/line-chart/legend/legend.tsx +++ b/src/client/visualizations/line-chart/legend/legend.tsx @@ -27,7 +27,7 @@ interface LegendValuesProps { values: string[]; } -const LegendValues: React.SFC = props => { +const LegendValues: React.FunctionComponent = props => { const { values } = props; return
@@ -48,7 +48,7 @@ const LegendValues: React.SFC = props => { ; }; -export const Legend: React.SFC = props => { +export const Legend: React.FunctionComponent = props => { const { values, title } = props; return
diff --git a/src/client/visualizations/line-chart/legend/series-legend.tsx b/src/client/visualizations/line-chart/legend/series-legend.tsx index f609b47be..726a779e6 100644 --- a/src/client/visualizations/line-chart/legend/series-legend.tsx +++ b/src/client/visualizations/line-chart/legend/series-legend.tsx @@ -22,7 +22,7 @@ interface SeriesLegend { essence: Essence; } -export const SeriesLegend: React.SFC = props => { +export const SeriesLegend: React.FunctionComponent = props => { const { essence } = props; const series = essence.getConcreteSeries().toArray(); const values = series.map(series => series.title()); diff --git a/src/client/visualizations/line-chart/legend/split-legend.tsx b/src/client/visualizations/line-chart/legend/split-legend.tsx index 98aa117a4..c2fc9ae3c 100644 --- a/src/client/visualizations/line-chart/legend/split-legend.tsx +++ b/src/client/visualizations/line-chart/legend/split-legend.tsx @@ -26,7 +26,7 @@ interface SplitLegendProps { essence: Essence; } -export const SplitLegend: React.SFC = props => { +export const SplitLegend: React.FunctionComponent = props => { const { essence, dataset } = props; const legendSplit = essence.splits.splits.first(); diff --git a/src/client/visualizations/line-chart/x-axis/x-axis.tsx b/src/client/visualizations/line-chart/x-axis/x-axis.tsx index 4d1cc7cd1..114e7db11 100644 --- a/src/client/visualizations/line-chart/x-axis/x-axis.tsx +++ b/src/client/visualizations/line-chart/x-axis/x-axis.tsx @@ -47,7 +47,7 @@ function labelFormatter(scale: ContinuousScale, timezone: Timezone): Unary String(floatFormat(value)); } -export const XAxis: React.SFC = props => { +export const XAxis: React.FunctionComponent = props => { const { width, ticks, scale, timezone } = props; const stage = Stage.fromSize(width, X_AXIS_HEIGHT); const format = labelFormatter(scale, timezone); diff --git a/src/client/visualizations/scatterplot/heatmap.tsx b/src/client/visualizations/scatterplot/heatmap.tsx index 36f48204f..ea445edba 100644 --- a/src/client/visualizations/scatterplot/heatmap.tsx +++ b/src/client/visualizations/scatterplot/heatmap.tsx @@ -38,7 +38,7 @@ interface HeatmapProps { const COLOR_SCALE_START = "#fff"; const COLOR_SCALE_END = "#90b5d0"; -export const Heatmap: React.SFC = ({ xBinCount, yBinCount, xScale, yScale, stage, data, xSeries, ySeries }) => { +export const Heatmap: React.FunctionComponent = ({ xBinCount, yBinCount, xScale, yScale, stage, data, xSeries, ySeries }) => { const xQuantile = d3.scaleQuantile().domain(xScale.domain()).range(range(0, xBinCount)); const yQuantile = d3.scaleQuantile().domain(yScale.domain()).range(range(0, yBinCount)); @@ -99,7 +99,7 @@ interface RectangleProps { fillColor: string; } -const Rectangle: React.SFC = ({ +const Rectangle: React.FunctionComponent = ({ xRange, yRange, xScale, diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx index 532b023de..94bb0bb3c 100644 --- a/src/client/visualizations/scatterplot/point.tsx +++ b/src/client/visualizations/scatterplot/point.tsx @@ -34,7 +34,7 @@ interface PointProps { const POINT_RADIUS = 3; const HOVER_AREA_RADIUS = 6; -export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => { +export const Point: React.FunctionComponent = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => { const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index b6f598fb2..01c04912d 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -13,24 +13,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import memoizeOne from "memoize-one"; import { Datum } from "plywood"; -import React from "react"; - +import React, { useCallback, useState } from "react"; import { ChartProps } from "../../../common/models/chart-props/chart-props"; import makeQuery from "../../../common/utils/query/visualization-query"; +import { ScatterplotSettings } from "../../../common/visualization-manifests/scatterplot/settings"; +import { GridLines } from "../../components/grid-lines/grid-lines"; import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel"; - -import "./scatterplot.scss"; - -import memoizeOne from "memoize-one"; -import { ScatterplotSettings } from "../../../common/visualization-manifests/scatterplot/settings"; -import { GridLines } from "../../components/grid-lines/grid-lines"; import { Heatmap } from "./heatmap"; import { Point } from "./point"; +import "./scatterplot.scss"; import { Tooltip } from "./tooltip"; import { calculateXAxisStage, @@ -43,97 +40,88 @@ import { YAxis } from "./y-axis"; const TICK_SIZE = 10; -interface ScatterplotState { - hoveredPoint: Datum | null; -} +type HoveredPoint = Datum | null; -export class Scatterplot extends React.Component { - state: ScatterplotState = { - hoveredPoint: null - }; +export const Scatterplot: React.FunctionComponent = ({ data, essence, stage }) => { + const [hoveredPoint, setHoveredPoint] = useState(null); - getPlottingData = memoizeOne(preparePlottingData); + const getPlottingData = memoizeOne(preparePlottingData); - setPointHover = (datum: Datum): void => - this.setState({ hoveredPoint: datum }); + const setPointHover = useCallback((datum: Datum): void => setHoveredPoint(datum), [setHoveredPoint]); - resetPointHover = (): void => - this.setState({ hoveredPoint: null }); + const resetPointHover = useCallback((): void => setHoveredPoint(null), [setHoveredPoint]); - render() { - const { data, essence, stage } = this.props; - const mainSplit = essence.splits.splits.first(); - const showHeatmap = (essence.visualizationSettings as ScatterplotSettings).showSummary; + const mainSplit = essence.splits.splits.first(); + const showHeatmap = (essence.visualizationSettings as ScatterplotSettings).showSummary; - const { - xTicks, - yTicks, - xScale, - yScale, - xSeries, - ySeries, - plottingStage, - scatterplotData - } = this.getPlottingData(data, essence, stage); + const { + xTicks, + yTicks, + xScale, + yScale, + xSeries, + ySeries, + plottingStage, + scatterplotData + } = getPlottingData(data, essence, stage); - const xAxisLabelPosition = getXAxisLabelPosition(stage, plottingStage); + const xAxisLabelPosition = getXAxisLabelPosition(stage, plottingStage); - return
- {ySeries.title()} - {xSeries.title()} - + {ySeries.title()} + {xSeries.title()} + + + {showHeatmap && - - {showHeatmap && } - - - - - - {scatterplotData.map(datum => { - return ( - - ); - })} - - -
; - } -} + ySeries={ySeries}/>} + + + + + + {scatterplotData.map(datum => { + return ( + + ); + })} + + +
; +}; export default function ScatterplotVisualization(props: VisualizationProps) { return diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx index a83ccb949..ad518b81d 100644 --- a/src/client/visualizations/scatterplot/tooltip.tsx +++ b/src/client/visualizations/scatterplot/tooltip.tsx @@ -43,7 +43,7 @@ interface TooltipProps { const TOOLTIP_OFFSET_Y = 50; const TOOLTIP_OFFSET_X = 100; -export const Tooltip: React.SFC = ({ +export const Tooltip: React.FunctionComponent = ({ datum, stage, xSeries, diff --git a/src/client/visualizations/scatterplot/x-axis.tsx b/src/client/visualizations/scatterplot/x-axis.tsx index e48683bf0..e74133daa 100644 --- a/src/client/visualizations/scatterplot/x-axis.tsx +++ b/src/client/visualizations/scatterplot/x-axis.tsx @@ -32,7 +32,7 @@ interface XAxisProps { formatter: Unary; } -export const XAxis: React.SFC = ({ stage, ticks, scale, formatter, tickSize }) => { +export const XAxis: React.FunctionComponent = ({ stage, ticks, scale, formatter, tickSize }) => { const labelY = tickSize + TEXT_OFFSET_X; const linePositionY = roundToHalfPx(0); const lines = ticks.map((tick: number) => { diff --git a/src/client/visualizations/scatterplot/y-axis.tsx b/src/client/visualizations/scatterplot/y-axis.tsx index 85c3a2625..cb3c6691d 100644 --- a/src/client/visualizations/scatterplot/y-axis.tsx +++ b/src/client/visualizations/scatterplot/y-axis.tsx @@ -32,7 +32,7 @@ interface YAxisProps { formatter: Unary; } -export const YAxis: React.SFC = ({ formatter, stage, tickSize, ticks, scale }) => { +export const YAxis: React.FunctionComponent = ({ formatter, stage, tickSize, ticks, scale }) => { const linePositionX = roundToHalfPx(stage.width); const lines = ticks.map((tick: number) => { diff --git a/src/client/visualizations/table/body/splits/nested-splits.tsx b/src/client/visualizations/table/body/splits/nested-splits.tsx index 4638d9f7a..1ff4d9dc3 100644 --- a/src/client/visualizations/table/body/splits/nested-splits.tsx +++ b/src/client/visualizations/table/body/splits/nested-splits.tsx @@ -32,7 +32,7 @@ interface NestedSplitsProps { highlightedRowIndex: number | null; } -export const NestedSplits: React.SFC = props => { +export const NestedSplits: React.FunctionComponent = props => { const { essence, data, highlightedRowIndex, hoverRow, visibleRowsIndexRange, segmentWidth } = props; return
diff --git a/src/client/visualizations/table/body/splits/split-rows.tsx b/src/client/visualizations/table/body/splits/split-rows.tsx index 1391b3659..8f00eafde 100644 --- a/src/client/visualizations/table/body/splits/split-rows.tsx +++ b/src/client/visualizations/table/body/splits/split-rows.tsx @@ -31,7 +31,7 @@ interface SplitRowsProps { highlightedRowIndex: number | null; } -export const SplitRows: React.SFC = props => { +export const SplitRows: React.FunctionComponent = props => { const { collapseRows, ...rest } = props; const { data, essence: { timezone, splits: { splits } } } = rest; if (!data) return null; diff --git a/src/client/visualizations/table/header/splits/combined-splits-title.tsx b/src/client/visualizations/table/header/splits/combined-splits-title.tsx index 8209d5538..ae23126be 100644 --- a/src/client/visualizations/table/header/splits/combined-splits-title.tsx +++ b/src/client/visualizations/table/header/splits/combined-splits-title.tsx @@ -25,7 +25,7 @@ interface CombinedSplitsTitle { splits: Splits; } -export const CombinedSplitsTitle: React.SFC = ({ dataCube, splits: { splits } }) => { +export const CombinedSplitsTitle: React.FunctionComponent = ({ dataCube, splits: { splits } }) => { const title = splits.map(split => findDimensionByName(dataCube.dimensions, split.reference).title).join(", "); return {title}; }; diff --git a/src/client/visualizations/table/header/splits/splits-header.tsx b/src/client/visualizations/table/header/splits/splits-header.tsx index 631316595..b3374c433 100644 --- a/src/client/visualizations/table/header/splits/splits-header.tsx +++ b/src/client/visualizations/table/header/splits/splits-header.tsx @@ -24,7 +24,7 @@ interface SplitHeaderProps { collapseRows: boolean; } -export const SplitsHeader: React.SFC = ({ essence, collapseRows }) => { +export const SplitsHeader: React.FunctionComponent = ({ essence, collapseRows }) => { const { dataCube, splits } = essence; return collapseRows ? : diff --git a/src/client/visualizations/table/highlight/highlight.tsx b/src/client/visualizations/table/highlight/highlight.tsx index da644123f..dfe81e84d 100644 --- a/src/client/visualizations/table/highlight/highlight.tsx +++ b/src/client/visualizations/table/highlight/highlight.tsx @@ -25,7 +25,7 @@ interface HighlighterProps { collapseRows: boolean; } -export const Highlighter: React.SFC = props => { +export const Highlighter: React.FunctionComponent = props => { const { highlightedIndex, scrollTopOffset, highlightedNesting, collapseRows } = props; const top = highlightedIndex * ROW_HEIGHT - scrollTopOffset; const left = collapseRows ? 0 : Math.max(0, highlightedNesting - 1) * INDENT_WIDTH; diff --git a/src/client/visualizations/table/scrolled-table/scrolled-table.tsx b/src/client/visualizations/table/scrolled-table/scrolled-table.tsx index 31b7388ec..47458cb6b 100644 --- a/src/client/visualizations/table/scrolled-table/scrolled-table.tsx +++ b/src/client/visualizations/table/scrolled-table/scrolled-table.tsx @@ -58,7 +58,7 @@ interface ScrolledTableProps { availableWidth: number; } -export const ScrolledTable: React.SFC = props => { +export const ScrolledTable: React.FunctionComponent = props => { const { essence, stage, diff --git a/src/client/visualizations/totals/total.tsx b/src/client/visualizations/totals/total.tsx index 87ead44b1..334d637e7 100644 --- a/src/client/visualizations/totals/total.tsx +++ b/src/client/visualizations/totals/total.tsx @@ -25,7 +25,7 @@ interface DifferenceProps { series: ConcreteSeries; } -const Difference: React.SFC = ({ datum, series }) => { +const Difference: React.FunctionComponent = ({ datum, series }) => { return
{series.formatValue(datum, SeriesDerivation.PREVIOUS)} @@ -46,7 +46,7 @@ export interface TotalProps { series: ConcreteSeries; } -export const Total: React.SFC = ({ showPrevious, datum, series }) => { +export const Total: React.FunctionComponent = ({ showPrevious, datum, series }) => { return
{series.title()}
{series.formatValue(datum, SeriesDerivation.CURRENT)}
diff --git a/src/client/visualizations/totals/totals.tsx b/src/client/visualizations/totals/totals.tsx index a3dbc4b60..2c96f4572 100644 --- a/src/client/visualizations/totals/totals.tsx +++ b/src/client/visualizations/totals/totals.tsx @@ -22,7 +22,7 @@ import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from ".. import { Total } from "./total"; import "./totals.scss"; -const BigNumbers: React.SFC = ({ essence, data }) => { +const BigNumbers: React.FunctionComponent = ({ essence, data }) => { const series = essence.getConcreteSeries().toArray(); const datum = data.data[0]; return
diff --git a/src/common/models/visualization-settings/visualization-settings.ts b/src/common/models/visualization-settings/visualization-settings.ts index bde8ca68a..01520c5fd 100644 --- a/src/common/models/visualization-settings/visualization-settings.ts +++ b/src/common/models/visualization-settings/visualization-settings.ts @@ -23,7 +23,7 @@ interface VisualizationSettingsComponentProps { settings: ImmutableRecord; } -export type VisualizationSettingsComponent = React.SFC>; +export type VisualizationSettingsComponent = React.FunctionComponent>; interface VisualizationSettingsConverter { print: Unary;