| /* |
| * 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. |
| */ |
| |
| import * as zrUtil from 'zrender/src/core/util'; |
| import * as numberUtil from '../../util/number'; |
| import GlobalModel from '../../model/Global'; |
| import ExtensionAPI from '../../core/ExtensionAPI'; |
| import ThemeRiverSeriesModel, { ThemeRiverSeriesOption } from './ThemeRiverSeries'; |
| import { RectLike } from 'zrender/src/core/BoundingRect'; |
| import List from '../../data/List'; |
| |
| export interface ThemeRiverLayoutInfo { |
| rect: RectLike |
| boundaryGap: ThemeRiverSeriesOption['boundaryGap'] |
| } |
| |
| export default function themeRiverLayout(ecModel: GlobalModel, api: ExtensionAPI) { |
| |
| ecModel.eachSeriesByType('themeRiver', function (seriesModel: ThemeRiverSeriesModel) { |
| |
| const data = seriesModel.getData(); |
| |
| const single = seriesModel.coordinateSystem; |
| |
| const layoutInfo = {} as ThemeRiverLayoutInfo; |
| |
| // use the axis boundingRect for view |
| const rect = single.getRect(); |
| |
| layoutInfo.rect = rect; |
| |
| const boundaryGap = seriesModel.get('boundaryGap'); |
| |
| const axis = single.getAxis(); |
| |
| layoutInfo.boundaryGap = boundaryGap; |
| |
| if (axis.orient === 'horizontal') { |
| boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], rect.height); |
| boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], rect.height); |
| const height = rect.height - boundaryGap[0] - boundaryGap[1]; |
| doThemeRiverLayout(data, seriesModel, height); |
| } |
| else { |
| boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], rect.width); |
| boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], rect.width); |
| const width = rect.width - boundaryGap[0] - boundaryGap[1]; |
| doThemeRiverLayout(data, seriesModel, width); |
| } |
| |
| data.setLayout('layoutInfo', layoutInfo); |
| }); |
| } |
| |
| /** |
| * The layout information about themeriver |
| * |
| * @param data data in the series |
| * @param seriesModel the model object of themeRiver series |
| * @param height value used to compute every series height |
| */ |
| function doThemeRiverLayout(data: List<ThemeRiverSeriesModel>, seriesModel: ThemeRiverSeriesModel, height: number) { |
| if (!data.count()) { |
| return; |
| } |
| const coordSys = seriesModel.coordinateSystem; |
| // the data in each layer are organized into a series. |
| const layerSeries = seriesModel.getLayerSeries(); |
| |
| // the points in each layer. |
| const timeDim = data.mapDimension('single'); |
| const valueDim = data.mapDimension('value'); |
| const layerPoints = zrUtil.map(layerSeries, function (singleLayer) { |
| return zrUtil.map(singleLayer.indices, function (idx) { |
| const pt = coordSys.dataToPoint(data.get(timeDim, idx)); |
| pt[1] = data.get(valueDim, idx) as number; |
| return pt; |
| }); |
| }); |
| |
| const base = computeBaseline(layerPoints); |
| const baseLine = base.y0; |
| const ky = height / base.max; |
| |
| // set layout information for each item. |
| const n = layerSeries.length; |
| const m = layerSeries[0].indices.length; |
| let baseY0; |
| for (let j = 0; j < m; ++j) { |
| baseY0 = baseLine[j] * ky; |
| data.setItemLayout(layerSeries[0].indices[j], { |
| layerIndex: 0, |
| x: layerPoints[0][j][0], |
| y0: baseY0, |
| y: layerPoints[0][j][1] * ky |
| }); |
| for (let i = 1; i < n; ++i) { |
| baseY0 += layerPoints[i - 1][j][1] * ky; |
| data.setItemLayout(layerSeries[i].indices[j], { |
| layerIndex: i, |
| x: layerPoints[i][j][0], |
| y0: baseY0, |
| y: layerPoints[i][j][1] * ky |
| }); |
| } |
| } |
| } |
| |
| /** |
| * Compute the baseLine of the rawdata |
| * Inspired by Lee Byron's paper Stacked Graphs - Geometry & Aesthetics |
| * |
| * @param data the points in each layer |
| */ |
| function computeBaseline(data: number[][][]) { |
| const layerNum = data.length; |
| const pointNum = data[0].length; |
| const sums = []; |
| const y0 = []; |
| let max = 0; |
| |
| for (let i = 0; i < pointNum; ++i) { |
| let temp = 0; |
| for (let j = 0; j < layerNum; ++j) { |
| temp += data[j][i][1]; |
| } |
| if (temp > max) { |
| max = temp; |
| } |
| sums.push(temp); |
| } |
| |
| for (let k = 0; k < pointNum; ++k) { |
| y0[k] = (max - sums[k]) / 2; |
| } |
| max = 0; |
| |
| for (let l = 0; l < pointNum; ++l) { |
| const sum = sums[l] + y0[l]; |
| if (sum > max) { |
| max = sum; |
| } |
| } |
| |
| return { |
| y0, |
| max |
| }; |
| } |