PointReducer

import {PointReducer} from 'cx/charts';

The PointReducer widget is used to calculate values based on points displayed on the chart.

PointReducer can be used as a standalone component or as one of the predefined forms:

ValueAtFinder - track values on line graphs
SnapPointFinder - snap to data points
MinMaxFinder - find minimum and maximums

<Svg style="width:600px;height:600px;" margin="30 30 30 30">
    <Chart axes={{
        x: <NumericAxis min={0} max={300}/>,
        y: <NumericAxis min={0} max={300} vertical/>,
    }}>
        <Gridlines />
        <PointReducer
            onInitAccumulator={(acc) => {
                acc.sumX = 0;
                acc.sumY = 0;
                acc.sumSize = 0;
            }}
            onMap={(acc, x, y, name, p) => {
                acc.sumX += x * p.size;
                acc.sumY += y * p.size;
                acc.sumSize += p.size;
            }}
            onReduce={(acc, {store}) => {
                if (acc.sumSize > 0) {
                    store.set('$page.avgX', acc.sumX / acc.sumSize);
                    store.set('$page.avgY', acc.sumY / acc.sumSize);
                }
            }}
        >
            <Repeater records-bind="$page.points" recordAlias="$point">
                <Marker colorIndex-bind="$point.color"
                    size-bind="$point.size"
                    x-bind="$point.x"
                    y-bind="$point.y"
                    style={{fillOpacity: 0.5}}
                    draggableX draggableY
                />
            </Repeater>

            <MarkerLine x-bind="$page.avgX" />
            <MarkerLine y-bind="$page.avgY" />
        </PointReducer>
    </Chart>
</Svg>

Copied!Cx Fiddle

Configuration

Property	Description	Type
onCreatePointFilter	A callback function used to create a predicate for filtering points. Accepts `filterParams` and `instance` as the arguments.	object
onInitAccumulator	A callback function used to initialize the accumulator. Arguments passed are `accumulator` and `instance`.	function
onMap	A callback function used to collect and map data points. Arguments passed are `accumulator`, `x`, `y`, `name`, `data`, `array` and `index`.	object
onReduce	A callback function used to process data and write results back. Arguments passed are `accumulator` and `instance`.	object
filterParams	Parameters which will be passed to the `onCreatePointFilter` callback.	object
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

PointReducer