test/matrix_application2.html - master - githubmirror/echarts

test/matrix_application2.html
800 строк34 KB
100pah
fix(matrix): fix test case and typo
31 май 2025, 19:11
31 май 2025, 19:117e49f51
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>


        <div id="main_spreadsheet_mimic"></div>


        <script>
            require([
                'echarts',
            ], function (echarts) {

                initChart();

                function initChart() {

                    const headerItemStyle = {
                        borderWidth: 1,
                        color: 'rgb(25,25,25)',
                        borderColor: 'rgb(64,64,64)',
                    };
                    const cornerItemStyle = {
                        // borderWidth: 1,
                        color: 'rgb(25,25,25)',
                        borderColor: 'rgb(25,25,25)',
                    };
                    const headerLabelOption = {
                        color: '#eee',
                    };
                    const dividerLineStyle = {
                        width: 0,
                    };
                    const bodyLabelOption = {
                        // overflow: 'break',
                        // width: 'auto',
                    };

                    const _matrixXYData = {
                        x: [{
                            value: 'R',
                            children: ['R1', {value: 'R2'}]
                        }, {
                            value: 'S'
                        }, {
                            value: 'T',
                            children: [{
                                value: 'T1',
                                children: ['T11']
                            }]
                        }, {
                            value: 'U'
                        }, {
                            value: 'V'
                        }, {
                            value: 'W'
                        }],

                        y: [{
                            value: 'LL',
                            children: [{
                                value: 'L',
                                children: [{
                                    value: 'A',
                                    children: ['A1', 'A2', {
                                        value: 'A3',
                                        children: ['A31', 'A32']
                                    }]
                                }, {
                                    value: 'B',
                                    children: ['B1', 'B2', 'B3', 'B4']
                                }, {
                                    value: 'C',
                                }, {
                                    value: 'D',
                                }]
                            }, {
                                value: 'E',
                            }]
                        }]
                    };

                    const _matrixBodyData = [
                        {coord: [[1, 2], [4, 5]], mergeCells: true, value: 'Firecracker Chicken Bites'},
                        {coord: [[2, 4], [1, 2]], mergeCells: true, value: 'Velvet Butter Curry'},
                        {coord: [1, 7], value: 'Ginger Blaze Wings'},
                        {coord: [3, [7, 8]], value: 'Sun-Dried Tomato Twists'},
                    ];
                    const _matrixCornerData = [
                        {coord: [[-1, -5], -1], mergeCells: true, value: 'Y header'},
                        {coord: [[-1, -3], [-2, -3]], mergeCells: true, value: 'X header'},
                    ];

                    const option = {
                        backgroundColor: '#eee',
                        title: {
                            text: 'Double click to edit a cell',
                            right: 10,
                            textStyle: {
                                fontSize: 12,
                                // fontWeight: 'normal',
                            }
                        },
                        tooltip: {},
                        matrix: {
                            left: 150,
                            right: 30,
                            x: {
                                levelSize: 20,
                                cursor: 's-resize',
                                silent: false,
                                itemStyle: headerItemStyle,
                                label: headerLabelOption,
                                dividerLineStyle,
                                data: _matrixXYData.x,
                            },
                            y: {
                                levelSize: 25,
                                cursor: 'e-resize',
                                silent: false,
                                itemStyle: headerItemStyle,
                                label: headerLabelOption,
                                dividerLineStyle,
                                data: _matrixXYData.y,
                            },
                            body: {
                                cursor: 'cell',
                                silent: false,
                                itemStyle: {
                                    color: '#fff',
                                    borderColor: 'rgb(194,202,220)'
                                },
                                label: bodyLabelOption,
                                data: _matrixBodyData,
                            },
                            corner: {
                                cursor: 'cell',
                                silent: false,
                                itemStyle: cornerItemStyle,
                                label: headerLabelOption,
                                data: _matrixCornerData,
                            },
                            backgroundStyle: {
                                borderWidth: 2,
                            },
                        },
                        graphic: {
                            z: 100,
                            elements: [{
                                type: 'rect',
                                id: 'selection_rect',
                                shape: {x: 0, y: 0, width: 0, height: 0},
                                ignore: true,
                                silent: true,
                                style: {
                                    lineWidth: 3,
                                    fill: 'rgba(0,180,230,0.2)',
                                    stroke: 'rgba(0,100,230,1)'
                                }
                            }, {
                                type: 'text',
                                left: 10,
                                top: 10,
                                id: 'selected_info',
                                silent: true,
                                style: {
                                    text: '',
                                    fontSize: 10,
                                }
                            }]
                        },
                    };

                    var chart = testHelper.create(echarts, 'main_spreadsheet_mimic', {
                        title: [
                            'Mimic spreadsheet',
                            'Test API: convertToLayout, convertToPixel, convertFromPixel',
                            '**Brush** start from body and header to perform different types of rect-selection.',
                            'Move outside the matrix area when brushing to test **clamp**',
                            'Mouse cursor should be different on body and header.',
                            'When brush start from body, selection rect should cover the entire merged cells.',
                            'When brush start from header, non-leaf should cover the entire span.',
                        ],
                        height: 500,
                        option: option,
                        buttons: [
                            {
                                text: 'hide/show matrix.x',
                                onclick() {
                                    _ctx && _ctx.showHideXDimension();
                                }
                            },
                            {
                                text: 'hide/show matrix.y',
                                onclick() {
                                    _ctx && _ctx.showHideYDimension();
                                }
                            },
                            {
                                text: 'merge cells',
                                onclick() {
                                    _ctx && _ctx.mergeSelectedCells();
                                }
                            },
                            {
                                text: 'add a sample cartesian',
                                onclick() {
                                    _ctx && _ctx.addSampleCartesian();
                                }
                            }
                        ]
                    });

                    const _ctx = miniSpreadsheet(chart, _matrixBodyData);

                } // End of initChart


                function miniSpreadsheet(chart, _rawMatrixBodyData) {
                    if (!chart) {
                        return;
                    }

                    const XY = ['x', 'y'];
                    const WH = ['width', 'height'];
                    const MatrixClampOption = {all: 1, body: 2, corner: 3};
                    const MatrixBrushMode = {body: 2, corner: 3, header: 4};

                    /**
                     * @typedef {number[][]} MatrixXYLocatorRange
                     * @typedef {
                     *     {
                     *         rawOption: MatrixOption['body']['data'][number];
                     *         xyLocatorRange: MatrixXYLocatorRange;
                     *     }
                     * } ParsedMatrixBodyDataItem
                     */


                    function enableChangeNotify(instance) {
                        const _listeners = [];
                        instance.onChange = function (listener) {
                            _listeners.push(listener);
                        };
                        instance._notifyChange = function () {
                            for (let listener of _listeners) {
                                listener();
                            }
                        }
                    }


                    class MatrixDataWrapper {
                        constructor(chart, selection) {
                            this._selection = selection;
                            /**
                             * @readonly
                             * @type {MatrixXYLocatorRange}
                             */
                            this.overallLocatorRange = null;
                            /**
                             * @readonly
                             * @type {ParsedMatrixBodyDataItem[]}
                             */
                            this.parsedBodyData = null;

                            enableChangeNotify(this);

                            selection.onChange(() => {
                                this._updateSelected();
                            });
                        }

                        init(rawMatrixBodyData) {
                            const overallLocatorRange = chart.convertToLayout(
                                {matrixIndex: 0}, [NaN, NaN], {clamp: MatrixClampOption.all}
                            ).matrixXYLocatorRange;

                            const parsedBodyData = [];
                            rawMatrixBodyData.forEach(rawOption => {
                                if (!rawOption || !rawOption.coord) {
                                    return;
                                }
                                const layout = chart.convertToLayout({matrixIndex: 0}, rawOption.coord);
                                const xyLocatorRange = layout.matrixXYLocatorRange;
                                if (isFinite(xyLocatorRange[0][0]) && isFinite(xyLocatorRange[0][1])
                                    && isFinite(xyLocatorRange[1][0]) && isFinite(xyLocatorRange[1][1])
                                ) {
                                    parsedBodyData.push({xyLocatorRange, rawOption});
                                }
                            });

                            this.overallLocatorRange = overallLocatorRange;
                            this.parsedBodyData = parsedBodyData;
                        }

                        addDataItem(xyLocatorRange, txt, mergeCells) {
                            const coord = [xyLocatorRange[0].slice(), xyLocatorRange[1].slice()];
                            this.parsedBodyData.push({
                                xyLocatorRange: coord,
                                rawOption: {coord, value: txt, mergeCells}
                            });
                        }

                        _updateSelected() {
                            const xyLocatorRange = this._selection.xyLocatorRange;
                            if (!xyLocatorRange) {
                                this.selectedBodyData = [];
                                return;
                            }
                            this.selectedBodyData = this.parsedBodyData.filter(
                                item => xyLocatorRangeIntersect(item.xyLocatorRange, xyLocatorRange)
                            );

                            this._notifyChange();
                        }
                    } // End of MatrixDataWrapper


                    /**
                     * @param {MatrixXYLocatorRange} locRange1
                     * @param {MatrixXYLocatorRange} locRange2
                     * @return boolean
                     */
                    function xyLocatorRangeIntersect(locRange1, locRange2) {
                        return intersectOnOneDimension(locRange1[0], locRange2[0])
                            && intersectOnOneDimension(locRange1[1], locRange2[1]);

                        function intersectOnOneDimension(oneDimLocRange1, oneDimLocRange2) {
                            return oneDimLocRange1[1] >= oneDimLocRange2[0]
                                && oneDimLocRange1[0] <= oneDimLocRange2[1];
                        }
                    }

                    class Selection {
                        constructor(chart) {
                            this._chart = chart;
                            this._brushing = false;
                            /**
                             * @typedef {{
                             *     clampOpt: {clamp: typeof MatrixClampOption};
                             *     brushMode: typeof MatrixBrushMode;
                             *     startXYLocator: null;
                             *     endXYLocator: null;
                             *     headerBrushDimIdx: 0 | 1; // x is 0, y is 1.
                             * }} SelectionCtx
                             *
                             * If no selected, be null | undefined.
                             * @type {SelectionCtx | null | undefined}
                             */
                            this._ctx = null;
                            /**
                             * If no selected, be null | undefined.
                             * @type {RectLike | null | undefined}
                             * @readonly
                             */
                            this.rect = null;
                            /**
                             * If no selected, be null | undefined.
                             * @type {XYLocatorRange | null | undefined}
                             * @readonly
                             */
                            this.xyLocatorRange = null;

                            enableChangeNotify(this);
                        }

                        _calcSelectionRect() {
                            if (!this._ctx) {
                                return;
                            }
                            const {startXYLocator, endXYLocator, headerBrushDimIdx} = this._ctx;
                            const otherDimIdx = 1 - headerBrushDimIdx;

                            let locatorRangeInput;
                            let ignoreMergeCells;
                            if (this._ctx.brushMode === MatrixBrushMode.body
                                || this._ctx.brushMode === MatrixBrushMode.corner
                            ) {
                                locatorRangeInput = [
                                    [startXYLocator[0], endXYLocator[0]],
                                    [startXYLocator[1], endXYLocator[1]]
                                ];
                                ignoreMergeCells = false;
                            }
                            else if (this._ctx.brushMode === MatrixBrushMode.header) {
                                // Find the dimension header cell, may be non-leaf,
                                // covering multiple rows/columns.
                                locatorRangeInput = [[], []];
                                locatorRangeInput[headerBrushDimIdx][0] = startXYLocator[headerBrushDimIdx];
                                locatorRangeInput[headerBrushDimIdx][1] = endXYLocator[headerBrushDimIdx];
                                locatorRangeInput[otherDimIdx][0] = _matrixDataWrapper.overallLocatorRange[otherDimIdx][0];
                                locatorRangeInput[otherDimIdx][1] = _matrixDataWrapper.overallLocatorRange[otherDimIdx][1];
                                ignoreMergeCells = true;
                            }

                            const layout = this._chart.convertToLayout(
                                {matrixIndex: 0},
                                locatorRangeInput,
                                {clamp: this._ctx.clampOpt, ignoreMergeCells}
                            );

                            if (isFinite(layout.rect.x) && isFinite(layout.rect.y)
                                && isFinite(layout.rect.width) && isFinite(layout.rect.height)
                            ) {
                                this.rect = layout.rect;
                                this.xyLocatorRange = layout.matrixXYLocatorRange;
                            }
                            else {
                                this.rect = this.xyLocatorRange = null;
                            }
                        }

                        brushStart(point) {
                            this.clearSelected();
                            this._brushing = true;

                            const startXYLocator = chart.convertFromPixel({matrixIndex: 0}, point);
                            if (isNaN(startXYLocator[0]) || isNaN(startXYLocator[1])) {
                                this._brushing = false;
                                return; // Out of matrix area.
                            }

                            let clampOpt;
                            let brushMode;
                            let headerBrushDimIdx;

                            if (startXYLocator[0] < 0 && startXYLocator[1] < 0) { // In corner area.
                                clampOpt = {clamp: MatrixClampOption.corner};
                                brushMode = MatrixBrushMode.corner;
                            }
                            else if (startXYLocator[0] >= 0 && startXYLocator[1] >= 0) { // In body area.
                                clampOpt = {clamp: MatrixClampOption.body};
                                brushMode = MatrixBrushMode.body;
                            }
                            else { // In dimension (header) area.
                                clampOpt = {clamp: MatrixClampOption.body};
                                brushMode = MatrixBrushMode.header;
                                headerBrushDimIdx = startXYLocator[0] >= 0 ? 0 : 1;
                            }

                            this._ctx = {
                                startXYLocator,
                                clampOpt,
                                brushMode,
                                headerBrushDimIdx,
                            };
                        }

                        brushUpdate(point) {
                            if (!this._brushing) {
                                return;
                            }
                            const xyLocator = chart.convertFromPixel({matrixIndex: 0}, point, this._ctx.clampOpt)
                            this._ctx.endXYLocator = xyLocator;

                            this._calcSelectionRect();

                            this._notifyChange();
                        }

                        getBrushMode() {
                            return this._ctx ? this._ctx.brushMode : null;
                        }

                        brushEnd() {
                            this._brushing = false;
                        }

                        resize() {
                            this._calcSelectionRect();

                            this._notifyChange();
                        }

                        clearSelected() {
                            this._ctx = null;
                            this.xyLocatorRange = null;
                            this.rect = null;
                        }

                    } // End of Selection


                    class CellInput {
                        constructor(chart, selection, matrixDataWrapper) {
                            this._chart = chart;
                            this._selection = selection;
                            this._matrixDataWrapper = matrixDataWrapper;
                        }

                        init() {
                            this._input = document.createElement('div');
                            document.body.appendChild(this._input);
                            this._input.style.cssText = [
                                'display: none;',
                                'position: absolute;',
                                'border: 0 solid #fff;',
                                'background: #fff;',
                                'box-sizing: border-box;',
                                'font-size: 12px;',
                                'margin: 0;',
                                'padding: 0 2px;',
                                'white-space: nowrap;',
                                'overflow-x: hidden;',
                                'overflow-y: hidden;',
                            ].join('');
                            this._input.setAttribute('contenteditable', 'true');
                            this._inputing = false;
                        }

                        start() {
                            if (!this._selection.rect) {
                                return;
                            }
                            const chartRect = chart.getDom().getBoundingClientRect();
                            const x = chartRect.x + this._selection.rect.x + 2;
                            const y = chartRect.y + this._selection.rect.y + 2;
                            const width = this._selection.rect.width - 4;
                            const height = this._selection.rect.height - 4;

                            this._inputing = true;
                            this._input.innerHTML = '';
                            this._input.style.display = 'block';
                            this._input.style.width = width + 'px';
                            this._input.style.height = height + 'px';
                            this._input.style.lineHeight = height + 'px';
                            this._input.style.left = x + 'px';
                            this._input.style.top = y + 'px';

                            this._input.focus();
                        }

                        finish() {
                            if (!this._inputing) {
                                return;
                            }
                            this._inputing = false;
                            const txt = this._input.innerText;
                            this._input.style.display = 'none';

                            const xyLocatorRange = this._selection.xyLocatorRange;
                            if (!xyLocatorRange || !txt) {
                                return;
                            }
                            this._matrixDataWrapper.addDataItem(xyLocatorRange, txt, false);

                            this._chart.setOption({
                                matrix: {
                                    body: {
                                        data: _matrixDataWrapper.parsedBodyData.map(
                                            item => item.rawOption
                                        )
                                    }
                                },
                            });
                        }
                    } // End of CellInput


                    class SelectionView {
                        constructor(chart, matrixDataWrapper, selection) {
                            this._chart = chart;
                            this._viewDirty = false;
                            this._matrixDataWrapper = matrixDataWrapper;
                            this._selection = selection;

                            const dirty = () => {
                                this._viewDirty = true;
                            }

                            selection.onChange(dirty)
                            matrixDataWrapper.onChange(dirty);
                        }

                        updateView() {
                            if (!this._viewDirty) {
                                return;
                            }
                            this._viewDirty = false;

                            const selectionRect = _selection.rect;

                            this._chart.setOption({
                                graphic: {
                                    elements: [{
                                        id: 'selection_rect',
                                        ignore: !selectionRect,
                                        shape: selectionRect
                                            ? {
                                                x: selectionRect.x,
                                                y: selectionRect.y,
                                                width: selectionRect.width,
                                                height: selectionRect.height,
                                            }
                                            : {x: 0, y: 0, width: 0, height: 0},
                                    }, {
                                        id: 'selected_info',
                                        style: {
                                            text: 'Selected values:\n'
                                                + _matrixDataWrapper.selectedBodyData.map(
                                                    item => item.rawOption.value
                                                ).join('\n')
                                        }
                                    }]
                                },
                            });
                        }
                    } // End of SelectionView


                    function showHideXDimension() {
                        _xShowing = !_xShowing;
                        // Render directly, since `chart.converToLayout` depends on this result.
                        chart.setOption({
                            matrix: {x: {show: _xShowing}},
                        });

                        _selection.resize();
                        _selectionView.updateView();
                    }

                    function showHideYDimension() {
                        _yShowing = !_yShowing;
                        // Render directly, since `chart.converToLayout` depends on this result.
                        chart.setOption({
                            matrix: {y: {show: _yShowing}}
                        });

                        _selection.resize();
                        _selectionView.updateView();
                    }

                    function prepareCoordForBodySelectionRect() {
                        const xyLocatorRange = _selection.xyLocatorRange;
                        if (!xyLocatorRange) {
                            alert('Need to brush a rect first.');
                            return;
                        }
                        const brushMode = _selection.getBrushMode();
                        if (brushMode !== MatrixBrushMode.body && brushMode !== MatrixBrushMode.header) {
                            alert('Only selected body cells can be merged.');
                            return;
                        }
                        return [xyLocatorRange[0].slice(), xyLocatorRange[1].slice()];
                    }

                    function mergeSelectedCells() {
                        const coord = prepareCoordForBodySelectionRect();
                        if (!coord) {
                            return;
                        }
                        _matrixDataWrapper.addDataItem(coord, undefined, true);
                        chart.setOption({
                            matrix: {
                                body: {
                                    data: _matrixDataWrapper.parsedBodyData.map(
                                        item => item.rawOption
                                    )
                                }
                            },
                        });
                    }

                    function addSampleCartesian() {
                        const coord = prepareCoordForBodySelectionRect();
                        if (!coord) {
                            return;
                        }
                        const id = _sampleCartesianIdBase++;
                        const categoryData = ['Mon', 'Tue', 'Web', 'Thu', 'Fri'];
                        const seriesData = categoryData.map(name => {
                            return Math.round(Math.random() * 100);
                        });
                        const gridId = `grid_${id}`;
                        const xAxisId = `xAxis_${id}`;
                        const yAxisId = `yAxis_${id}`;
                        const seriesId = `series.line_${id}`;
                        chart.setOption({
                            grid: {
                                id: gridId,
                                coordinateSystem: 'matrix',
                                coord,
                                top: 2,
                                left: 2,
                                right: 2,
                                bottom: 2,
                                containLabel: true,
                            },
                            xAxis: {
                                id: xAxisId,
                                gridId,
                                data: ['Mon', 'Tue', 'Web', 'Thu', 'Fri']
                            },
                            yAxis: {
                                id: yAxisId,
                                gridId,
                            },
                            series: {
                                type: 'line',
                                id: seriesId,
                                xAxisId,
                                yAxisId,
                                data: seriesData,
                            }
                        });
                    }

                    let _xShowing = true;
                    let _yShowing = true;
                    let _sampleCartesianIdBase = 100;

                    const _zr = chart.getZr();

                    const _selection = new Selection(chart);
                    const _matrixDataWrapper = new MatrixDataWrapper(chart, _selection);
                    const _cellInput = new CellInput(chart, _selection, _matrixDataWrapper);
                    const _selectionView = new SelectionView(chart, _matrixDataWrapper, _selection);

                    _matrixDataWrapper.init(_rawMatrixBodyData);
                    _cellInput.init();


                    _zr.on('mousedown', function (event) {
                        _cellInput.finish();
                        _selection.clearSelected();
                        _selection.brushStart([event.offsetX, event.offsetY]);
                        _selection.brushUpdate([event.offsetX, event.offsetY]);
                        _selectionView.updateView();
                    });
                    _zr.on('mousemove', function (event) {
                        _selection.brushUpdate([event.offsetX, event.offsetY]);
                        _selectionView.updateView();
                    });
                    _zr.on('mouseup', function (event) {
                        _selection.brushUpdate([event.offsetX, event.offsetY]);
                        _selection.brushEnd();
                        _selectionView.updateView();
                    });
                    _zr.on('dblclick', function (event) {
                        _cellInput.start();
                    });

                    window.addEventListener('resize', function () {
                        _selectionView.updateView();
                    }, false);

                    return {
                        showHideXDimension,
                        showHideYDimension,
                        mergeSelectedCells,
                        addSampleCartesian,
                    };

                } // End of miniSpreadsheet

            });

        </script>






    </body>
</html>