@devexpress/dx-react-chart/dist/dx-react-chart.umd.cjs.map

Composable plugin-based chart component for React

{"version":3,"file":"dx-react-chart.umd.cjs","sources":["../src/plugins/basic-data.tsx","../src/plugins/chart-core.tsx","../src/plugins/axes-layout.tsx","../src/plugins/space-filling-rects.tsx","../src/plugins/controller-component.tsx","../src/templates/clip-path.tsx","../src/utils/updatable-sizer.tsx","../src/plugins/pane-layout.tsx","../src/plugins/layout-manager.tsx","../src/plugins/component-layout.tsx","../src/plugins/palette.tsx","../src/templates/layout.tsx","../src/templates/label.tsx","../src/chart.tsx","../src/templates/legend/marker.tsx","../src/plugins/legend.tsx","../src/plugins/title.tsx","../src/utils/series-helper.tsx","../src/utils/patch-props.tsx","../src/plugins/scale.tsx","../src/plugins/stack.tsx","../src/plugins/animation.tsx","../src/utils/with-states.tsx","../src/templates/pattern.tsx","../src/utils/with-pattern.tsx","../src/utils/with-animation.tsx","../src/templates/series/area.tsx","../src/plugins/area-series.tsx","../src/templates/series/point-collection.tsx","../src/templates/series/bar.tsx","../src/plugins/bar-series.tsx","../src/templates/series/path.tsx","../src/templates/series/line.tsx","../src/plugins/line-series.tsx","../src/templates/series/slice.tsx","../src/plugins/pie-series.tsx","../src/templates/series/point.tsx","../src/plugins/scatter-series.tsx","../src/templates/series/spline.tsx","../src/plugins/spline-series.tsx","../src/templates/axis/root.tsx","../src/templates/axis/label.tsx","../src/templates/axis/line.tsx","../src/plugins/axis.tsx","../src/plugins/tooltip.tsx","../src/templates/drag-box.tsx","../src/plugins/zoom-and-pan.tsx","../src/plugins/event-tracker.tsx","../src/plugins/hover-state.tsx","../src/plugins/selection-state.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Plugin, Getter } from '@devexpress/dx-react-core';\nimport { defaultDomains } from '@devexpress/dx-chart-core';\nimport { BasicDataProps } from '../types';\n\nconst series = [];\n\nexport const BasicData: React.FunctionComponent<BasicDataProps> = ({ data, rotated }) => (\n  <Plugin name=\"Basis\">\n    <Getter name=\"data\" value={data} />\n    <Getter name=\"domains\" value={defaultDomains} />\n    <Getter name=\"series\" value={series} />\n    <Getter name=\"rotated\" value={rotated} />\n  </Plugin>\n);\n","import * as React from 'react';\nimport { Plugin, Getter, Getters } from '@devexpress/dx-react-core';\nimport { buildScales, scaleSeriesPoints } from '@devexpress/dx-chart-core';\n\nconst getScales = ({ domains, ranges }: Getters) => buildScales(domains, ranges);\n\nconst getSeries = ({\n  series, scales, rotated,\n}: Getters) => scaleSeriesPoints(series, scales, rotated);\n\nexport class ChartCore extends React.PureComponent {\n  render() {\n    return (\n      <Plugin>\n        <Getter name=\"scales\" computed={getScales} />\n        <Getter name=\"series\" computed={getSeries} />\n      </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport {\n  TOP, BOTTOM, LEFT, RIGHT,\n} from '@devexpress/dx-chart-core';\nimport { Plugin, Template, TemplatePlaceholder, Getter } from '@devexpress/dx-react-core';\n\nexport class AxesLayout extends React.PureComponent {\n  ref = React.createRef<HTMLDivElement>();\n  render() {\n    return (\n      <Plugin>\n        <Getter name=\"centerDivRef\" value={this.ref} />\n        <Template name=\"canvas\">\n          <div\n            id=\"center-center\"\n            ref={this.ref}\n            style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}\n          >\n            <div id={`${TOP}-axis-container`} style={{ display: 'flex', flexDirection: 'row' }}>\n              <TemplatePlaceholder name={`${TOP}-${LEFT}-axis`} />\n              <TemplatePlaceholder name={`${TOP}-axis`} />\n              <TemplatePlaceholder name={`${TOP}-${RIGHT}-axis`} />\n            </div>\n            <div\n              id=\"center-axis-container\"\n              style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}\n            >\n              <TemplatePlaceholder name={`${LEFT}-axis`} />\n              <TemplatePlaceholder />\n              <TemplatePlaceholder name={`${RIGHT}-axis`} />\n            </div>\n            <div id={`${BOTTOM}-axis-container`} style={{ display: 'flex', flexDirection: 'row' }}>\n              <TemplatePlaceholder name={`${BOTTOM}-${LEFT}-axis`} />\n              <TemplatePlaceholder name={`${BOTTOM}-axis`} />\n              <TemplatePlaceholder name={`${BOTTOM}-${RIGHT}-axis`} />\n            </div>\n          </div>\n        </Template>\n      </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Plugin, Template, TemplateConnector } from '@devexpress/dx-react-core';\nimport { SpaceFillingRectsProps, BBoxes } from '../types';\n\nexport class SpaceFillingRects extends React.PureComponent<SpaceFillingRectsProps> {\n  render() {\n    const { placeholders } = this.props;\n    return (\n      <Plugin name=\"SpaceFillingRects\">\n        {placeholders.map(name => (\n          <Template name={name} key={name}>\n            <TemplateConnector>\n              {({ layouts }) => {\n                const key = name.slice(name.indexOf('-') + 1);\n                const width = Object.keys(layouts as BBoxes).reduce((prev, cur) => {\n                  if (cur.includes(key)) {\n                    return prev + layouts[cur].width;\n                  }\n                  return prev;\n                }, 0);\n                return <div id={name} style={{ width }} />;\n              }}\n            </TemplateConnector>\n          </Template>\n        ))}\n      </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Plugin, Getter, Getters } from '@devexpress/dx-react-core';\nimport { isReadyToRenderSeries } from '@devexpress/dx-chart-core';\n\nexport class ControllerComponent extends React.PureComponent {\n  isPreviousDataEmpty: boolean = true;\n\n  readyToRenderSeriesComputed = ({\n    layouts, centerDivRef, data, axesExist,\n  }: Getters) => {\n    const isPreviousDataEmpty = this.isPreviousDataEmpty;\n    this.isPreviousDataEmpty = !data.length;\n    return isReadyToRenderSeries(layouts, centerDivRef, isPreviousDataEmpty, !!axesExist);\n  }\n\n  render () {\n    return (\n    <Plugin name=\"ControllerComponent\">\n      <Getter name=\"readyToRenderSeries\" computed={this.readyToRenderSeriesComputed} />\n    </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport { ClipPathProps } from '../types';\n\nconst EXTRA_PIXELS = 2;\n\nexport class ClipPath extends React.PureComponent<ClipPathProps> {\n  render() {\n    const {\n      id, width, height,\n    } = this.props;\n    return (\n      <defs>\n        <clipPath id={id}>\n          <rect\n            x={-EXTRA_PIXELS / 2}\n            y={-EXTRA_PIXELS / 2}\n            width={width + EXTRA_PIXELS}\n            height={height + EXTRA_PIXELS}\n          />\n        </clipPath>\n      </defs>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Sizer, SizerProps } from '@devexpress/dx-react-core';\n\n// It is located in a separate file only for testing purpose -\n// it should actually be placed next to PaneLayout.\nexport class UpdatableSizer extends React.PureComponent<SizerProps> {\n  ref = React.createRef<Sizer>();\n\n  componentDidUpdate() {\n    this.props.onSizeChange(this.ref.current!.getSize());\n  }\n\n  render() {\n    return <Sizer ref={this.ref} {...this.props} />;\n  }\n}\n","import * as React from 'react';\nimport {\n  Plugin,\n  Getter,\n  Template,\n  TemplateConnector,\n  TemplatePlaceholder,\n} from '@devexpress/dx-react-core';\nimport { ClipPath } from '../templates/clip-path';\n\n// Original *Sizer* cannot be used because it ignores (as it should do) *forceUpdate* request.\n// *UpdatableSizer* implements *componentDidUpdate* and forces internal *Sizer* size calculation.\n// It allows to run chart size recalculation by calling *forceUpdate* on chart instance.\nimport { UpdatableSizer } from '../utils/updatable-sizer';\n\nconst DIV_STYLE: React.CSSProperties = {\n  flex: 1, zIndex: 1, position: 'relative', width: '100%',\n};\n\nconst SVG_STYLE: React.CSSProperties = {\n  position: 'absolute', left: 0, top: 0, overflow: 'visible',\n};\n\nconst SizerContainer = ({ children, forwardedRef }) => (\n  <div ref={forwardedRef} style={DIV_STYLE}>{children}</div>\n);\n\nlet numDefs = 0;\nconst getUniqueId = () => {\n  numDefs += 1;\n  return numDefs;\n};\nexport class PaneLayout extends React.PureComponent {\n  ref = React.createRef<SVGSVGElement>();\n  clipPathId = `clip_path_${getUniqueId()}`;\n\n  render() {\n    return (\n      <Plugin name=\"PaneLayout\">\n        <Getter name=\"rootRef\" value={this.ref} />\n        <Getter name=\"clipPathId\" value={this.clipPathId} />\n        <Template name=\"canvas\">\n        {params => (\n          <TemplateConnector>\n            {({ layouts }, { changeBBox }) => {\n              const { width, height } = layouts.pane;\n              return (\n                <UpdatableSizer\n                  containerComponent={SizerContainer}\n                  onSizeChange={size => changeBBox({ placeholder: 'pane', bBox: size })}\n                >\n                  <svg\n                    ref={this.ref}\n                    {...params}\n                    width={width}\n                    height={height}\n                    style={SVG_STYLE}\n                  >\n                    <ClipPath id={this.clipPathId} width={width} height={height} />\n                    <TemplatePlaceholder name=\"series\" />\n                  </svg>\n                </UpdatableSizer>\n              );\n            }}\n          </TemplateConnector>\n          )}\n        </Template>\n      </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport {\n  Plugin,\n  Getter,\n  Action,\n  Template,\n  TemplatePlaceholder,\n  createStateHelper,\n  Getters,\n  ActionFn,\n} from '@devexpress/dx-react-core';\nimport { bBoxes, getRanges } from '@devexpress/dx-chart-core';\nimport { LayoutManagerProps, LayoutManagerState, BBoxesChange } from '../types';\n\nconst doGetRanges = ({ layouts, rotated }: Getters) => getRanges(layouts.pane, rotated);\n\nexport class LayoutManager extends React.PureComponent<LayoutManagerProps, LayoutManagerState> {\n  static defaultProps: Partial<LayoutManagerProps> = {\n    width: 0,\n  };\n  changeBBox: ActionFn<BBoxesChange>;\n\n  constructor(props: LayoutManagerProps) {\n    super(props);\n\n    this.state = { bBoxes: { pane: { width: 0, height: 0 } } };\n\n    const stateHelper = createStateHelper(this);\n    this.changeBBox = stateHelper.applyFieldReducer.bind(\n      stateHelper,\n      'bBoxes',\n      bBoxes,\n    );\n  }\n\n  render() {\n    const {\n      width, height, rootComponent: Root, ...restProps\n    } = this.props;\n    const { bBoxes: stateBBoxes } = this.state;\n\n    return (\n      <Plugin>\n        <Getter name=\"layouts\" value={stateBBoxes} />\n        <Getter name=\"ranges\" computed={doGetRanges} />\n        <Action name=\"changeBBox\" action={this.changeBBox} />\n\n        <Template name=\"root\">\n          <Root\n            width={width!}\n            height={height}\n            {...restProps}\n          >\n            <TemplatePlaceholder name=\"canvas\" />\n          </Root>\n        </Template>\n      </Plugin>\n    );\n  }\n}\n","import * as React from 'react';\nimport {\n  TOP, BOTTOM, LEFT, RIGHT,\n} from '@devexpress/dx-chart-core';\nimport { Plugin, Template, TemplatePlaceholder } from '@devexpress/dx-react-core';\n\nexport const ComponentLayout: React.FunctionComponent = () => (\n  <Plugin name=\"ComponentLayout\">\n    <Template name=\"canvas\">\n      <div id={`${TOP}-container`} style={{ display: 'flex', flexDirection: 'row' }}>\n        <TemplatePlaceholder name={`${TOP}-${LEFT}`} />\n        <TemplatePlaceholder name={TOP} />\n        <TemplatePlaceholder name={`${TOP}-${RIGHT}`} />\n      </div>\n      <div id=\"center-container\" style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>\n        <TemplatePlaceholder name={LEFT} />\n        <TemplatePlaceholder />\n        <TemplatePlaceholder name={RIGHT} />\n      </div>\n      <div id={`${BOTTOM}-container`} style={{ display: 'flex', flexDirection: 'row' }}>\n        <TemplatePlaceholder name={`${BOTTOM}-${LEFT}`} />\n        <TemplatePlaceholder name={BOTTOM} />\n        <TemplatePlaceholder name={`${BOTTOM}-${RIGHT}`} />\n      </div>\n    </Template>\n  </Plugin>\n);\n","import * as React from 'react';\nimport { Plugin, Getter } from '@devexpress/dx-react-core';\nimport { PaletteProps } from '../types';\n\nclass PaletteBase extends React.PureComponent<PaletteProps> {\n  render() {\n    const { scheme } = this.props;\n    return (\n      <Plugin name=\"Palette\">\n        <Getter name=\"palette\" value={scheme} />\n      </Plugin>\n    );\n  }\n}\n\nexport const Palette: React.ComponentType<PaletteProps> = PaletteBase;\n","import * as React from 'react';\nimport { RootLayoutProps } from '../types';\n\nexport class Root extends React.PureComponent<RootLayoutProps> {\n  render() {\n    const {\n      children, width, height, style, ...restProps\n    } = this.props;\n\n    return (\n      <div\n        style={{\n          ...style,\n          height: `${height}px`,\n          ...width ? { width: `${width}px` } : null,\n        }}\n        {...restProps}\n      >\n        {children}\n      </div>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Chart } from '../types';\n\nexport class Label extends React.PureComponent<Chart.LabelProps> {\n  render() {\n    return (\n      <text {...this.props} />\n    );\n  }\n}\n","import * as React from 'react';\nimport { PluginHost, withComponents, PluginComponents } from '@devexpress/dx-react-core';\nimport {\n  TOP, BOTTOM, LEFT, RIGHT,\n} from '@devexpress/dx-chart-core';\nimport { ChartProps } from './types';\n\nimport { BasicData } from './plugins/basic-data';\nimport { ChartCore } from './plugins/chart-core';\nimport { AxesLayout } from './plugins/axes-layout';\nimport { SpaceFillingRects } from './plugins/space-filling-rects';\nimport { ControllerComponent } from './plugins/controller-component';\nimport { PaneLayout } from './plugins/pane-layout';\nimport { LayoutManager } from './plugins/layout-manager';\nimport { ComponentLayout } from './plugins/component-layout';\nimport { Palette } from './plugins/palette';\nimport { Root } from './templates/layout';\nimport { Label } from './templates/label';\n\nconst scheme = [];\nconst placeholders = [\n  `${TOP}-${LEFT}`,\n  `${TOP}-${RIGHT}`,\n  `${BOTTOM}-${LEFT}`,\n  `${BOTTOM}-${RIGHT}`,\n  `${TOP}-${LEFT}-axis`,\n  `${TOP}-${RIGHT}-axis`,\n  `${BOTTOM}-${LEFT}-axis`,\n  `${BOTTOM}-${RIGHT}-axis`,\n];\n\nclass RawChart extends React.PureComponent<ChartProps> {\n  static defaultProps: Partial<ChartProps> = {\n    height: 500,\n    rotated: false,\n  };\n  static components: PluginComponents = {\n    rootComponent: 'Root',\n  };\n\n  render() {\n    const {\n      data,\n      width,\n      height,\n      children,\n      rotated,\n      rootComponent,\n      ...restProps\n    } = this.props;\n    return ((\n      <PluginHost>\n        <BasicData data={data} rotated={rotated!} />\n        <Palette scheme={scheme} />\n        <LayoutManager\n          width={width}\n          height={height!}\n          rootComponent={rootComponent}\n          {...restProps}\n        />\n        <PaneLayout />\n        <AxesLayout />\n        <ComponentLayout />\n        <SpaceFillingRects placeholders={placeholders} />\n        {children}\n        <ControllerComponent />\n        <ChartCore />\n      </PluginHost>\n    ));\n  }\n}\n\nexport const Chart: React.ComponentType<ChartProps> = withComponents({ Root })(RawChart);\n(Chart as any).Label = Label;\n","import * as React from 'react';\nimport { Legend } from '../../types';\n\nexport class Marker extends React.PureComponent<Legend.MarkerProps> {\n  render() {\n    const { color, ...restProps } = this.props;\n    return (\n      <svg fill={color} width=\"10\" height=\"10\" {...restProps}>\n        <circle r={5} cx={5} cy={5} {...restProps} />\n      </svg>\n    );\n  }\n}\n","import * as React from 'react';\nimport {\n  Plugin,\n  TemplateConnector,\n  Template,\n  TemplatePlaceholder,\n  withComponents,\n  Getters,\n  PluginComponents,\n} from '@devexpress/dx-react-core';\nimport { getLegendItems } from '@devexpress/dx-chart-core';\nimport { Marker } from '../templates/legend/marker';\nimport { LegendProps } from '../types';\n\nclass RawLegend extends React.PureComponent<LegendProps> {\n  static defaultProps: Partial<LegendProps> = {\n    position: 'right',\n    getItems: ({ series }: Getters) => getLegendItems(series),\n  };\n  static components: PluginComponents = {\n    rootComponent: 'Root',\n    itemComponent: 'Item',\n    markerComponent: 'Marker',\n    labelComponent: 'Label',\n  };\n\n  render() {\n    const {\n      markerComponent: MarkerComponent,\n      labelComponent: Label,\n      rootComponent: Root,\n      itemComponent: Item,\n      position,\n      getItems,\n    } = this.props;\n    const placeholder = position!;\n    return (\n      <Plugin name=\"Legend\">\n        <Template name={placeholder}>\n          <TemplatePlaceholder />\n          <TemplateConnector>\n            {getters => (\n              <Root name={`legend-${placeholder}`}>\n                {getItems!(getters).map(({ text, color }) => (\n                  <Item key={text}>\n                    <MarkerComponent name={text} color={color} />\n                    <Label text={text} />\n                  </Item>\n                ))}\n              </Root>\n            )}\n          </TemplateConnector>\n        </Template>\n      </Plugin>\n    );\n  }\n}\n\nexport const Legend: React.ComponentType<LegendProps> = withComponents({ Marker })(RawLegend);\n","import * as React from 'react';\n\nimport {\n  Plugin,\n  Template,\n  TemplatePlaceholder,\n  PluginComponents,\n} from '@devexpress/dx-react-core';\nimport { TitleProps } from '../types';\n\nclass TitleBase extends React.PureComponent<TitleProps> {\n  static components: PluginComponents = {\n    textComponent: 'Text',\n  };\n  static defaultProps: Partial<TitleProps> = {\n    position: 'top',\n  };\n\n  render() {\n    const {\n      textComponent: Text,\n      text,\n      position,\n    } = this.props;\n    const placeholder = position!;\n    return (\n      <Plugin name=\"Title\">\n        <Template name={placeholder}>\n          <TemplatePlaceholder />\n          <Text text={text} />\n        </Template>\n      </Plugin>\n    );\n  }\n}\nexport const Title: React.ComponentType<TitleProps> = TitleBase;\n","import * as React from 'react';\nimport {\n  Template,\n  Plugin,\n  Getter,\n  TemplatePlaceholder,\n  TemplateConnector,\n  withComponents,\n  Getters,\n  PluginComponents,\n} from '@devexpress/dx-react-core';\nimport {\n  findSeriesByName, addSeries, extendDomains, getValueDomainName, ARGUMENT_DOMAIN,\n} from '@devexpress/dx-chart-core';\nimport {\n  ExtraSeriesParameters, SeriesProps, PathComponentProps, Scales,\n} from '../types';\n\n/** @internal */\nexport const declareSeries = <T extends SeriesProps>(\n  pluginName: string,\n  { components, getPointTransformer, createHitTester }: ExtraSeriesParameters,\n): React.ComponentType<T> => {\n  class Component extends React.PureComponent<T> {\n    static components: PluginComponents;\n    static defaultProps: Partial<SeriesProps> = {\n      name: 'defaultSeriesName',\n    };\n\n    render() {\n      const {\n        name,\n        argumentField,\n        valueField,\n        scaleName,\n        seriesComponent,\n        pointComponent,\n        color,\n        ...restProps\n      } = this.props;\n      const symbolName = Symbol(name);\n      const seriesItem = {\n        getPointTransformer,\n        createHitTester,\n        ...this.props,\n        symbolName,\n      };\n      const getSeries = ({\n        series,\n        data,\n        palette,\n      }: Getters) => addSeries(series, data, palette, seriesItem, restProps);\n      const getDomains = ({\n        series,\n        domains,\n      }: Getters) => extendDomains(domains, findSeriesByName(symbolName, series));\n      return (\n        <Plugin name={pluginName}>\n          <Getter name=\"series\" computed={getSeries} />\n          <Getter name=\"domains\" computed={getDomains} />\n          <Template name=\"series\">\n            <TemplatePlaceholder />\n            <TemplateConnector>\n              {({\n                series, scales, animation, rotated, layouts, clipPathId, readyToRenderSeries,\n              }) => {\n                const { pane } = layouts;\n                const currentSeries = findSeriesByName(symbolName, series);\n                const currentScales: Scales = {\n                  argScale: scales[ARGUMENT_DOMAIN],\n                  valScale: scales[getValueDomainName(currentSeries!.scaleName)],\n                };\n                const Path: React.ComponentType<PathComponentProps> =\n                  currentSeries.seriesComponent as any;\n                return (\n                  <Path\n                    index={currentSeries.index}\n                    pointComponent={currentSeries.pointComponent}\n                    coordinates={currentSeries.points as any}\n                    rotated={rotated}\n                    state={currentSeries.state}\n                    color={currentSeries.color}\n                    scales={currentScales}\n                    pane={pane}\n                    clipPathId={clipPathId}\n                    animation={animation}\n                    readyToRenderSeries={readyToRenderSeries}\n                  />\n                );\n              }}\n            </TemplateConnector>\n          </Template>\n        </Plugin>\n      );\n    }\n  }\n  Component.components = {};\n  if (components.Path) {\n    Component.components.seriesComponent = 'Path';\n  }\n  if (components.Point) {\n    Component.components.pointComponent = 'Point';\n  }\n  return withComponents(components)(Component);\n};\n","import * as React from 'react';\nimport { ITargetComponent } from '@devexpress/dx-react-core';\nimport { CommonComponentProps } from '@devexpress/dx-chart-core';\nimport { RawAxisProps, ScaleProps } from '../types';\n\n/** @internal */\nexport const withPatchedProps = (\n  patch: <T extends CommonComponentProps | RawAxisProps | ScaleProps>(props: T) => T,\n) => <K extends CommonComponentProps | RawAxisProps | ScaleProps>(\n  Target: React.ComponentType<K>,\n): React.ComponentType<K> => {\n  class Component extends React.PureComponent<K> {\n    static components = (Target as any as ITargetComponent).components;\n\n    render() {\n      const props = patch(this.props as K);\n      return <Target {...props} />;\n    }\n  }\n  return Component;\n};\n","import * as React from 'react';\nimport { Plugin, Getter, Getters } from '@devexpress/dx-react-core';\nimport { ARGUMENT_DOMAIN, getValueDomainName, addDomain } from '@devexpress/dx-chart-core';\nimport { withPatchedProps } from '../utils';\nimport { ScaleProps, ArgumentScaleProps, ValueScaleProps } from '../types';\n\n/** @internal */\nexport class Scale extends React.PureComponent<ScaleProps> {\n  render() {\n    const { name, factory, modifyDomain } = this.props;\n    const args = { factory, modifyDomain };\n    const getDomains = ({ domains }: Getters) => addDomain(domains, name!, args);\n    return (\n      <Plugin name=\"Scale\">\n        <Getter name=\"domains\" computed={getDomains} />\n      </Plugin>\n    );\n  }\n}\n\nexport const ArgumentScale: React.ComponentType<ArgumentScaleProps> = withPatchedProps(props => ({\n  ...props,\n  name: ARGUMENT_DOMAIN,\n}))(Scale);\n\nexport const ValueScale: React.ComponentType<ValueScaleProps> = withPatchedProps(props => ({\n  ...props,\n  name: getValueDomainName((props as ScaleProps).name),\n}))(Scale);\n","import * as React from 'react';\nimport { Plugin, Getter, Getters } from '@devexpress/dx-react-core';\nimport { getStackedSeries, getStackedDomains } from '@devexpress/dx-chart-core';\nimport { StackProps, StacksOptions, OffsetFn, OrderFn } from '../types';\nimport {\n  stackOrderNone,\n  stackOffsetDiverging,\n} from 'd3-shape';\n\nconst getDomains = ({ domains, series }: Getters) => getStackedDomains(domains, series);\n\nclass StackBase extends React.PureComponent<StackProps> {\n  static defaultProps: Partial<StackProps> = {\n    stacks: [],\n    offset: stackOffsetDiverging as OffsetFn,\n    order: stackOrderNone as OrderFn,\n  };\n\n  render() {\n    const { stacks, offset, order } = this.props;\n    const params: StacksOptions = {\n      stacks: stacks!,\n      offset: offset!,\n      order: order!,\n    };\n    const getSeries = ({ series, data }: Getters) => getStackedSeries(series, data, params);\n    return (\n      <Plugin name=\"Stack\">\n        <Getter name=\"series\" computed={getSeries} />\n        <Getter name=\"domains\" computed={getDomains} />\n      </Plugin>\n    );\n  }\n}\n\nexport const Stack: React.ComponentType<StackProps> = StackBase;\n","import * as React from 'react';\nimport { Plugin, Getter } from '@devexpress/dx-react-core';\nimport { buildAnimation, easeOutCubic } from '@devexpress/dx-chart-core';\nimport { AnimationProps } from '../types';\n\nclass AnimationBase extends React.PureComponent<AnimationProps> {\n  static defaultProps: Partial<AnimationProps> = {\n    easing: easeOutCubic,\n    duration: 1000,\n  };\n  render() {\n    const { easing, duration } = this.props;\n    const buildAnimationGetter = () => buildAnimation(easing!, duration!);\n    return (\n      <Plugin name=\"Animation\">\n        <Getter name=\"animation\" computed={buildAnimationGetter} />\n      </Plugin>\n    );\n  }\n}\n\nexport const Animation: React.ComponentType<AnimationProps> = AnimationBase;\n","import * as React from 'react';\nimport { CommonComponentProps } from '@devexpress/dx-chart-core';\n\nexport const withStates = (\n  states: { readonly [key: string]: (props: any) => any; },\n) => <K extends CommonComponentProps>(\n  Component: React.ComponentType<K>,\n): React.ComponentType<K> => {\n  class ComponentWithStates extends React.PureComponent<K> {\n    render() {\n      const { state, ...restProps } = this.props;\n      const stateFunc = state && states[state!];\n      const result = stateFunc ? stateFunc(restProps) : restProps;\n      return React.isValidElement(result) ? result : <Component {...result} />;\n    }\n  }\n  return ComponentWithStates;\n};\n","import * as React from 'react';\nimport { PatternProps } from '../types';\n\nexport class Pattern extends React.PureComponent<PatternProps> {\n  static defaultProps: Partial<PatternProps> = {\n    size: 6,\n    opacity: 0.75,\n  };\n\n  render() {\n    const {\n      id, size, color, opacity,\n    } = this.props;\n    return (\n      <defs>\n        <pattern\n          id={id}\n          width={size}\n          height={size}\n          patternUnits=\"userSpaceOnUse\"\n        >\n          <rect x={0} y={0} width={size} height={size} fill={color} opacity={opacity} />\n          <path\n            // tslint:disable-next-line: max-line-length\n            d={`M ${size! / 2} ${-size! / 2} L ${-size! / 2} ${size! / 2} M 0 ${size!} L ${size!} 0 M ${size! * 1.5} ${size! / 2} L ${size! / 2} ${size! * 1.5}`}\n            strokeWidth={2}\n            stroke={color}\n          />\n        </pattern>\n      </defs>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Pattern } from '../templates/pattern';\n\n// Function is returned (not PureComponent descendant) because\n// result is invoked as function (not as React component).\nexport const withPattern = <T extends {}>(\n  getPatternId: (props: T) => string, props: T,\n) => (Target: React.ComponentType<any>) => (targetProps: any) => {\n  const { color, ...restProps } = targetProps;\n  const patternId = getPatternId(targetProps);\n  return (\n    <React.Fragment>\n      <Target\n        color={`url(#${patternId})`}\n        {...restProps}\n      />\n      <Pattern\n        id={patternId}\n        color={color}\n        {...props}\n      />\n    </React.Fragment>\n  );\n};\n","import * as React from 'react';\nimport { Animation, isScalesChanged } from '@devexpress/dx-chart-core';\nimport { GetDelayFn, Scales, AnimatedComponent } from '../types';\n\nexport const withAnimation = <T extends AnimatedComponent>(\n    processAnimation: (start: T, end: T) => (progress: number) => any, getProps: (props: T) => any,\n    getStartCoordinates: (scales: Scales, props: T) => any,\n    isValuesChanged: (previous: T, current: T) => boolean,\n    getDelay?: GetDelayFn,\n) => (Component: React.ComponentType<T>): React.ComponentType<T> => {\n  class ComponentWithAnimation extends React.PureComponent<T, T> {\n    animate: Animation | undefined;\n    constructor(props) {\n      super(props);\n\n      this.setAttribute = this.setAttribute.bind(this);\n    }\n\n    setAttribute(state) {\n      this.setState(state);\n    }\n\n    componentDidMount() {\n      const {\n        animation, scales, index, readyToRenderSeries,\n      } = this.props;\n      if (!readyToRenderSeries) {\n        return;\n      }\n      const props = getProps(this.props);\n      this.processComponent(animation, { scales: {} }, scales, props, {}, index);\n    }\n\n    componentDidUpdate(prevProps) {\n      const {\n        scales, index, animation, readyToRenderSeries,\n      } = this.props;\n      if (!readyToRenderSeries) {\n        return;\n      }\n      this.processComponent(\n        animation, prevProps, scales, getProps(this.props),\n        getProps(prevProps), index,\n      );\n    }\n\n    processComponent(animation, { scales: prevScales }, scales, props, prevProps, index) {\n      if (!animation) {\n        this.setAttribute(props);\n      } else if (this.animate) {\n        if (isScalesChanged(prevScales, scales)) {\n          this.setAttribute(props);\n        } else if (isValuesChanged(prevProps, props)) {\n          const delay = getDelay ? getDelay(index, false) : 0;\n          this.animate.update(prevProps, props, delay);\n        }\n      } else {\n        this.animate = animation(\n          getStartCoordinates(scales, props), props,\n          processAnimation, this.setAttribute, getDelay && getDelay(index, true),\n        );\n      }\n    }\n\n    componentWillUnmount() {\n      return this.animate && this.animate.stop();\n    }\n\n    render() {\n      const { readyToRenderSeries, ...restProps } = this.props;\n      if (!this.state) {\n        return null;\n      }\n      return (\n        <Component {...restProps} {...this.state} />\n      );\n    }\n  }\n  return ComponentWithAnimation;\n};\n","import * as React from 'react';\nimport {\n  HOVERED, SELECTED, dArea, dRotateArea,\n  processAreaAnimation, getPathStart,\n  isCoordinatesChanged,\n} from '@devexpress/dx-chart-core';\nimport { withStates } from '../../utils/with-states';\nimport { withPattern } from '../../utils/with-pattern';\nimport { withAnimation } from '../../utils/with-animation';\nimport { AreaSeries } from '../../types';\n\nclass RawArea extends React.PureComponent<AreaSeries.SeriesProps> {\n  render() {\n    const {\n      path,\n      coordinates, animation,\n      index, state, pointComponent,\n      color, clipPathId, pane,\n      scales, rotated,\n      ...restProps\n    } = this.props;\n    const dPath = path === undefined ? (rotated ? dRotateArea : dArea) : path;\n    return (\n      <path\n        clipPath={`url(#${clipPathId})`}\n        d={dPath!(coordinates)}\n        fill={color}\n        opacity={0.5}\n        {...restProps}\n      />\n    );\n  }\n}\n\n// It should actually be `withPattern<AreaSeries.PointProps>` but `opacity` is not decleared there.\n// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.\n\nexport const Area: React.ComponentType<AreaSeries.SeriesProps> = withAnimation<any>(\n  processAreaAnimation,\n  ({ coordinates }) => ({ coordinates }),\n  getPathStart,\n  isCoordinatesChanged,\n)(withStates({\n  [HOVERED]: withPattern<any>(\n    ({ index, color }) => `series-${index}-color-${color}-hover`, { opacity: 0.75 },\n  )(RawArea),\n  [SELECTED]: withPattern<any>(\n    ({ index, color }) => `series-${index}-color-${color}-selection`, { opacity: 0.5 },\n  )(RawArea),\n})(RawArea));\n","import * as React from 'react';\nimport {\n  getAreaPointTransformer as getPointTransformer, createAreaHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { Area as Path } from '../templates/series/area';\nimport { AreaSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const AreaSeries: React.ComponentType<AreaSeriesProps> = declareSeries<AreaSeriesProps>('AreaSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path },\n});\n","import * as React from 'react';\nimport { PathComponentProps } from '../../types';\n\n/** @internal */\nexport class PointCollection extends React.PureComponent<PathComponentProps> {\n  render() {\n    const {\n      pointComponent,\n      coordinates,\n      index,\n      state,\n      clipPathId,\n      ...restProps // restProps are used because of animation and scale\n    } = this.props;\n    const Point = pointComponent!;\n    return (coordinates.map(point => (\n      <Point\n        key={String(point.index)}\n        seriesIndex={index}\n        {...restProps}\n        {...point}\n      />\n    )));\n  }\n}\n","import * as React from 'react';\nimport {\n  processBarAnimation, HOVERED, SELECTED, dBar, getVisibility, adjustBarSize,\n  isValuesChanged, getPointStart,\n} from '@devexpress/dx-chart-core';\nimport { withStates } from '../../utils/with-states';\nimport { withPattern } from '../../utils/with-pattern';\nimport { withAnimation } from '../../utils/with-animation';\nimport { BarSeries } from '../../types';\n\nclass RawBar extends React.PureComponent<BarSeries.PointProps> {\n  render() {\n    const {\n      arg, val, startVal, barWidth, maxBarWidth, animation,\n      argument, value, seriesIndex, index, state, rotated,\n      color, pane,\n      scales,\n      ...restProps\n    } = this.props;\n    const width = barWidth * maxBarWidth;\n    const bar = dBar(arg, val, startVal, width, rotated);\n    const visibility = getVisibility(\n      pane, bar.x + bar.width / 2, bar.y + bar.height, bar.width, bar.height,\n    );\n    const adjustedBar = visibility === 'visible' ? adjustBarSize(bar, pane) : bar;\n    return (\n      <rect\n        {...adjustedBar}\n        fill={color}\n        visibility={visibility}\n        {...restProps}\n      />\n    );\n  }\n}\n\n// It should actually be `withPattern<BarSeries.PointProps>` but `opacity` is not decleared there.\n// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.\n\nexport const Bar: React.ComponentType<BarSeries.PointProps> = withAnimation<any>(\n    processBarAnimation,\n    ({ arg, val, startVal }) => ({ arg, val, startVal }),\n    getPointStart,\n    isValuesChanged,\n    )(withStates({\n      [HOVERED]: withPattern<any>(\n    ({ seriesIndex, index, color }) =>\n      `series-${seriesIndex}-point-${index}-color-${color}-hover`, { opacity: 0.75 },\n    )(RawBar),\n      [SELECTED]: withPattern<any>(\n    ({ seriesIndex, index, color }) =>\n      `series-${seriesIndex}-point-${index}-color-${color}-selection`, { opacity: 0.5 },\n    )(RawBar),\n    })(RawBar));\n","import * as React from 'react';\nimport {\n  getBarPointTransformer as getPointTransformer,\n  createBarHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { PointCollection as Path } from '../templates/series/point-collection';\nimport { Bar as Point } from '../templates/series/bar';\nimport { BarSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const BarSeries: React.ComponentType<BarSeriesProps> = declareSeries<BarSeriesProps>('BarSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path, Point },\n});\n\nBarSeries.defaultProps = {\n  barWidth: 0.9,\n};\n","import * as React from 'react';\nimport {\n  processLineAnimation, HOVERED, SELECTED, isCoordinatesChanged, getPathStart,\n} from '@devexpress/dx-chart-core';\nimport { withStates } from '../../utils/with-states';\nimport { withAnimation } from '../../utils/with-animation';\nimport { PathComponentPathProps } from '../../types';\n\nclass RawPath extends React.PureComponent<PathComponentPathProps> {\n  render() {\n    const {\n      path, animation,\n      coordinates, rotated,\n      index, state, pointComponent,\n      color, clipPathId,\n      scales, pane,\n      ...restProps\n    } = this.props;\n    return (\n      <path\n        clipPath={`url(#${clipPathId})`}\n        d={path!(coordinates)}\n        fill=\"none\"\n        strokeWidth={2}\n        stroke={color}\n        {...restProps}\n      />\n    );\n  }\n}\n\nexport const Path = withAnimation<any>(\n  processLineAnimation,\n  ({ coordinates }) => ({ coordinates }),\n  getPathStart,\n  isCoordinatesChanged,\n)(withStates({\n  [HOVERED]: props => ({ strokeWidth: 4, ...props }),\n  [SELECTED]: props => ({ strokeWidth: 4, ...props }),\n})(RawPath));\n","import * as React from 'react';\nimport { dLine, dRotateLine } from '@devexpress/dx-chart-core';\nimport { Path } from './path';\nimport { LineSeries } from '../../types';\n\nexport class Line extends React.PureComponent<LineSeries.SeriesProps> {\n  render() {\n    const { rotated, path } = this.props;\n    const dPath = path === undefined ? (rotated ? dRotateLine : dLine) : path;\n    return <Path {...this.props} path={dPath} />;\n  }\n}\n","import * as React from 'react';\nimport {\n  getLinePointTransformer as getPointTransformer,\n  createLineHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { Line as Path } from '../templates/series/line';\nimport { AreaSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const LineSeries: React.ComponentType<AreaSeriesProps> = declareSeries<AreaSeriesProps>('LineSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path },\n});\n","import * as React from 'react';\nimport {\n  dPie, HOVERED, SELECTED, processPieAnimation, isValuesChanged, getDelay,\n  getPieStart,\n} from '@devexpress/dx-chart-core';\nimport { withStates } from '../../utils/with-states';\nimport { withPattern } from '../../utils/with-pattern';\nimport { withAnimation } from '../../utils/with-animation';\nimport { PieSeries } from '../../types';\n\nclass RawSlice extends React.PureComponent<PieSeries.PointProps> {\n  render() {\n    const {\n      arg, val, rotated,\n      argument, value, seriesIndex, index, state, maxRadius,\n      innerRadius, outerRadius, startAngle, endAngle,\n      color, animation, pane,\n      scales,\n      ...restProps\n    } = this.props;\n    return (\n      <g transform={`translate(${arg} ${val})`}>\n        <path\n          d={dPie(maxRadius, innerRadius, outerRadius,\n            startAngle, endAngle)}\n          fill={color}\n          stroke=\"none\"\n          {...restProps}\n        />\n      </g>\n    );\n  }\n}\n\n// It should actually be `withPattern<PieSeries.PointProps>` but `opacity` is not decleared there.\n// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.\n\nexport const Slice: React.ComponentType<PieSeries.PointProps> = withAnimation<any>(\n  processPieAnimation,\n  ({ innerRadius, outerRadius, startAngle, endAngle }) =>\n  ({ innerRadius, outerRadius, startAngle, endAngle }),\n  getPieStart,\n  isValuesChanged,\n  getDelay,\n)(withStates({\n  [HOVERED]: withPattern<any>(\n    ({ seriesIndex, index, color }) =>\n    `series-${seriesIndex}-point-${index}-color-${color}-hover`, { opacity: 0.75 },\n  )(RawSlice),\n  [SELECTED]: withPattern<any>(\n    ({ seriesIndex, index, color }) =>\n    `series-${seriesIndex}-point-${index}-color-${color}-selection`, { opacity: 0.5 },\n  )(RawSlice),\n})(RawSlice));\n","import * as React from 'react';\nimport {\n  getPiePointTransformer as getPointTransformer,\n  createPieHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { PointCollection as Path } from '../templates/series/point-collection';\nimport { Slice as Point } from '../templates/series/slice';\nimport { PieSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const PieSeries: React.ComponentType<PieSeriesProps> = declareSeries<PieSeriesProps>('PieSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path, Point },\n});\n\nPieSeries.defaultProps = {\n  innerRadius: 0,\n  outerRadius: 1,\n};\n","import * as React from 'react';\nimport {\n  processPointAnimation, dSymbol, HOVERED, SELECTED, getVisibility,\n  isValuesChanged, getPointStart,\n} from '@devexpress/dx-chart-core';\nimport { withStates } from '../../utils/with-states';\nimport { withAnimation } from '../../utils/with-animation';\nimport { ScatterSeries } from '../../types';\n\nclass RawPoint extends React.PureComponent<ScatterSeries.PointProps> {\n  render() {\n    const {\n      arg, val, rotated, animation,\n      argument, value, seriesIndex, index, state,\n      point: pointOptions,\n      color, pane,\n      scales,\n      ...restProps\n    } = this.props;\n    const x = rotated ? val : arg;\n    const y = rotated ? arg : val;\n    const visibility = getVisibility(pane, x!, y!, 0, 0);\n    return (\n      <path\n        transform={`translate(${x} ${y})`}\n        d={dSymbol(pointOptions)}\n        fill={color}\n        visibility={visibility}\n        stroke=\"none\"\n        {...restProps}\n      />\n    );\n  }\n}\n\n// The expression is used to have 12 from 7 in default scenario\n// and to adjust hovered or selected size when custom *point.size* is defined.\nconst getAdjustedOptions = ({ size }) => ({ size: Math.round(size * 1.7) });\n\nexport const Point: React.ComponentType<ScatterSeries.PointProps> = withAnimation<any>(\n  processPointAnimation,\n  ({ arg, val }) => ({ arg, val }),\n  getPointStart,\n  isValuesChanged,\n)(withStates({\n  [HOVERED]: ({ color, point, ...restProps }) => ({\n    stroke: color,\n    strokeWidth: 4,\n    fill: 'none',\n    point: getAdjustedOptions(point),\n    ...restProps,\n  }),\n  [SELECTED]: ({ color, point, ...restProps }) => ({\n    stroke: color,\n    strokeWidth: 4,\n    fill: 'none',\n    point: getAdjustedOptions(point),\n    ...restProps,\n  }),\n})(RawPoint));\n","import * as React from 'react';\nimport {\n  getScatterPointTransformer as getPointTransformer,\n  createScatterHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { PointCollection as Path } from '../templates/series/point-collection';\nimport { Point } from '../templates/series/point';\nimport { ScatterSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const ScatterSeries: React.ComponentType<ScatterSeriesProps> = declareSeries<ScatterSeriesProps>('ScatterSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path, Point },\n});\n\nScatterSeries.defaultProps = {\n  point: { size: 7 },\n};\n","import * as React from 'react';\nimport { dSpline, dRotateSpline } from '@devexpress/dx-chart-core';\nimport { Path } from './path';\nimport { SplineSeries } from '../../types';\n\nexport class Spline extends React.PureComponent<SplineSeries.SeriesProps> {\n  render() {\n    const { rotated, path } = this.props;\n    const dPath = path === undefined ? (rotated ? dRotateSpline : dSpline) : path;\n    return <Path {...this.props} path={dPath} />;\n  }\n}\n","import * as React from 'react';\nimport {\n  getLinePointTransformer as getPointTransformer,\n  createSplineHitTester as createHitTester,\n} from '@devexpress/dx-chart-core';\nimport { declareSeries } from '../utils';\nimport { Spline as Path } from '../templates/series/spline';\nimport { AreaSeriesProps } from '../types';\n\n// tslint:disable-next-line: max-line-length\nexport const SplineSeries: React.ComponentType<AreaSeriesProps> = declareSeries<AreaSeriesProps>('SplineSeries', {\n  getPointTransformer,\n  createHitTester,\n  components: { Path },\n});\n","import * as React from 'react';\nimport { Axis } from '../../types';\n\nconst getOffset = (position: number) => (position >= 0 ? 0 : -position);\nconst getSize = (position: number, delta: number) => (position >= 0 ? position + delta : -position);\n\nexport class Root extends React.PureComponent<Axis.RootProps, Axis.RootState> {\n  ref = React.createRef<SVGGElement>();\n\n  constructor(props: Axis.RootProps) {\n    super(props);\n    this.state = {\n      x: 0, y: 0,\n    };\n    this.adjust = this.adjust.bind(this);\n  }\n\n  componentDidMount() {\n    this.setState(this.adjust);\n  }\n\n  componentDidUpdate() {\n    // *setState* is called unconditionally because PureComponent is expected to break the cycle.\n    this.setState(this.adjust);\n  }\n\n  // Since calculated state does not depend on current state non-callback version of *setState*\n  // might have been expected - it can't be done.\n  // Parent component (Axis) accesses its DOM content in *onSizeChange* handler. When\n  // this component is mounted parent is not yet - it crashes on DOM access.\n  // *setState* callback is invoked later then *componentDidMount* - by that time parent component\n  // is already mounted and can access its DOM.\n  // Because of it callback version of *setState* has to be used here.\n  // Can we rely on the fact that by the time of callback parent is mounted?\n  // For now we stick with it, but need to find a more solid solution.\n  adjust(_: Axis.RootState, { dx, dy, onSizeChange }: Axis.RootProps): Axis.RootState {\n    const bbox = this.ref.current!.getBBox();\n    const width = dx ? bbox.width : getSize(bbox.x, bbox.width);\n    const height = dy ? bbox.height : getSize(bbox.y, bbox.height);\n    const x = dx ? 0 : getOffset(bbox.x);\n    const y = dy ? 0 : getOffset(bbox.y);\n    onSizeChange({ width, height });\n    return { x, y };\n  }\n\n  render() {\n    const { children, onSizeChange, dx, dy, ...restProps } = this.props;\n    const { x, y } = this.state;\n    return (\n      <g\n        ref={this.ref}\n        transform={`translate(${x} ${y})`}\n        {...restProps}\n      >\n        {children}\n      </g>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Axis } from '../../types';\n\nexport class Label extends React.PureComponent<Axis.LabelProps> {\n  render() {\n    const {\n      text, ...restProps\n    } = this.props;\n\n    return (\n      <text\n        {...restProps}\n      >\n        {text}\n      </text>\n    );\n  }\n}\n","import * as React from 'react';\nimport { Axis } from '../../types';\n\nexport class Line extends React.PureComponent<Axis.LineProps> {\n  render() {\n    const {\n      x1, x2, y1, y2, ...restProps\n    } = this.props;\n    return (\n      <path\n        d={`M ${x1} ${y1} L ${x2} ${y2}`}\n        {...restProps}\n      />\n    );\n  }\n}\n","import * as React from 'react';\nimport {\n  Plugin,\n  TemplateConnector,\n  Template,\n  TemplatePlaceholder,\n  withComponents,\n  PluginComponents,\n  onSizeChangeFn,\n  Getter,\n} from '@devexpress/dx-react-core';\nimport {\n  ARGUMENT_DOMAIN, getValueDomainName,\n  getRotatedPosition, isValidPosition,\n  LEFT, BOTTOM, getTickCoordinates, gridCoordinatesGetter, tickCoordinatesGetter,\n  Tick, Grid,\n} from '@devexpress/dx-chart-core';\nimport { RawAxisProps } from '../types';\nimport { Root } from '../templates/axis/root';\nimport { Label } from '../templates/axis/label';\nimport { Line } from '../templates/axis/line';\n\nimport { withPatchedProps } from '../utils';\n\nconst SVG_STYLE: React.CSSProperties = {\n  position: 'absolute', left: 0, top: 0, overflow: 'visible',\n};\n\nclass RawAxis extends React.PureComponent<RawAxisProps> {\n  static components: PluginComponents = {\n    rootComponent: 'Root',\n    tickComponent: 'Tick',\n    labelComponent: 'Label',\n    lineComponent: 'Line',\n    gridComponent: 'Grid',\n  };\n  static defaultProps: Partial<RawAxisProps> = {\n    tickSize: 5,\n    indentFromAxis: 10,\n  };\n\n  rootRef = React.createRef<HTMLDivElement>();\n  adjustedWidth = 0;\n  adjustedHeight = 0;\n\n  renderAxis(position: string) {\n    const {\n      scaleName,\n      tickSize,\n      tickFormat,\n      indentFromAxis,\n      showTicks,\n      showLine,\n      showLabels,\n      rootComponent: RootComponent,\n      tickComponent: TickComponent,\n      labelComponent: LabelComponent,\n      lineComponent: LineComponent,\n    } = this.props;\n    const placeholder = `${position}-axis`;\n    const layoutName = `${placeholder}-${scaleName}`;\n    return (\n      <Template name={placeholder}>\n        <TemplatePlaceholder />\n        <TemplateConnector>\n          {({ scales, layouts, rotated }, { changeBBox }) => {\n            if (!isValidPosition(position!, scaleName!, rotated)) {\n              return null;\n            }\n            const scale = scales[scaleName!];\n            if (!scale) {\n              return null;\n            }\n            const { width, height } = layouts[layoutName] || { width: 0, height: 0 };\n            const paneSize = layouts.pane;\n\n            const { sides: [dx, dy], ticks } = getTickCoordinates({\n              callback: tickCoordinatesGetter,\n              scaleName: scaleName!,\n              position: position!,\n              tickSize: tickSize!,\n              tickFormat,\n              indentFromAxis: indentFromAxis!,\n              scale,\n              paneSize: [paneSize.width, paneSize.he