incubator-superset0.99/superset-ui-plugins-0.11.15-1/packages/superset-ui-legacy-plugin-chart-partition/lib/Partition.js

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _d = _interopRequireDefault(require("d3"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _d3Hierarchy = require("d3-hierarchy");

var _color = require("@superset-ui/color");

var _numberFormat = require("@superset-ui/number-format");

var _timeFormat = require("@superset-ui/time-format");

require("./Partition.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* eslint-disable react/sort-prop-types */

/**
 * 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.
 */

/* eslint no-param-reassign: [2, {"props": false}] */

/* eslint-disable no-plusplus */
// Compute dx, dy, x, y for each node and
// return an array of nodes in breadth-first order
function init(root) {
  const flat = [];
  const dy = 1 / (root.height + 1);
  let prev = null;
  root.each(n => {
    n.y = dy * n.depth;
    n.dy = dy;

    if (n.parent) {
      n.x = prev.depth === n.parent.depth ? 0 : prev.x + prev.dx;
      n.dx = n.weight / n.parent.sum * n.parent.dx;
    } else {
      n.x = 0;
      n.dx = 1;
    }

    prev = n;
    flat.push(n);
  });
  return flat;
} // Declare PropTypes for recursive data structures
// https://github.com/facebook/react/issues/5676

/* eslint-disable-next-line  no-undef */


const lazyFunction = f => () => f().apply(void 0, arguments);

const leafType = _propTypes.default.shape({
  name: _propTypes.default.string,
  val: _propTypes.default.number.isRequired
});

const parentShape = {
  name: _propTypes.default.string,
  val: _propTypes.default.number.isRequired,
  children: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(lazyFunction(() => parentShape)), leafType]))
};

const nodeType = _propTypes.default.oneOfType([_propTypes.default.shape(parentShape), leafType]);

const propTypes = {
  data: _propTypes.default.arrayOf(nodeType),
  // array of rootNode
  width: _propTypes.default.number,
  height: _propTypes.default.number,
  colorScheme: _propTypes.default.string,
  dateTimeFormat: _propTypes.default.string,
  equalDateSize: _propTypes.default.bool,
  levels: _propTypes.default.arrayOf(_propTypes.default.string),
  metrics: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])),
  numberFormat: _propTypes.default.string,
  partitionLimit: _propTypes.default.number,
  partitionThreshold: _propTypes.default.number,
  timeSeriesOption: _propTypes.default.string,
  useLogScale: _propTypes.default.bool,
  useRichTooltip: _propTypes.default.bool
}; // This vis is based on
// http://mbostock.github.io/d3/talk/20111018/partition.html

function Icicle(element, props) {
  const {
    width,
    height,
    data,
    colorScheme,
    dateTimeFormat,
    equalDateSize,
    levels,
    useLogScale = false,
    metrics = [],
    numberFormat,
    partitionLimit,
    partitionThreshold,
    useRichTooltip,
    timeSeriesOption = 'not_time'
  } = props;

  const div = _d.default.select(element);

  div.classed('superset-legacy-chart-partition', true); // Chart options

  const chartType = timeSeriesOption;
  const hasTime = ['adv_anal', 'time_series'].includes(chartType);
  const format = (0, _numberFormat.getNumberFormatter)(numberFormat);
  const timeFormat = (0, _timeFormat.getTimeFormatter)(dateTimeFormat);

  const colorFn = _color.CategoricalColorNamespace.getScale(colorScheme);

  div.selectAll('*').remove();
  const tooltip = div.append('div').classed('partition-tooltip', true);

  function drawVis(i, dat) {
    const datum = dat[i];
    const w = width;
    const h = height / data.length;

    const x = _d.default.scale.linear().range([0, w]);

    const y = _d.default.scale.linear().range([0, h]);

    const viz = div.append('div').attr('class', 'chart').style('width', w + "px").style('height', h + "px").append('svg:svg').attr('width', w).attr('height', h); // Add padding between multiple visualizations

    if (i !== data.length - 1 && data.length > 1) {
      viz.style('padding-bottom', '3px');
    }

    if (i !== 0 && data.length > 1) {
      viz.style('padding-top', '3px');
    }

    const root = (0, _d3Hierarchy.hierarchy)(datum);

    function hasDateNode(n) {
      return metrics.includes(n.data.name) && hasTime;
    } // node.name is the metric/group name
    // node.disp is the display value
    // node.value determines sorting order
    // node.weight determines partition height
    // node.sum is the sum of children weights


    root.eachAfter(n => {
      n.disp = n.data.val;
      n.value = n.disp < 0 ? -n.disp : n.disp;
      n.weight = n.value;
      n.name = n.data.name; // If the parent is a metric and we still have
      // the time column, perform a date-time format

      if (n.parent && hasDateNode(n.parent)) {
        // Format timestamp values
        n.weight = equalDateSize ? 1 : n.value;
        n.value = n.name;
        n.name = timeFormat(n.name);
      }

      if (useLogScale) n.weight = Math.log(n.weight + 1);
      n.disp = n.disp && !Number.isNaN(n.disp) && Number.isFinite(n.disp) ? format(n.disp) : '';
    }); // Perform sort by weight

    root.sort((a, b) => {
      const v = b.value - a.value;

      if (v === 0) {
        return b.name > a.name ? 1 : -1;
      }

      return v;
    }); // Prune data based on partition limit and threshold
    // both are applied at the same time

    if (partitionThreshold && partitionThreshold >= 0) {
      // Compute weight sums as we go
      root.each(n => {
        n.sum = n.children ? n.children.reduce((a, v) => a + v.weight, 0) || 1 : 1;

        if (n.children) {
          // Dates are not ordered by weight
          if (hasDateNode(n)) {
            if (equalDateSize) {
              return;
            }

            const removeIndices = []; // Keep at least one child

            for (let j = 1; j < n.children.length; j++) {
              if (n.children[j].weight / n.sum < partitionThreshold) {
                removeIndices.push(j);
              }
            }

            for (let j = removeIndices.length - 1; j >= 0; j--) {
              n.children.splice(removeIndices[j], 1);
            }
          } else {
            // Find first child that falls below the threshold
            let j;

            for (j = 1; j < n.children.length; j++) {
              if (n.children[j].weight / n.sum < partitionThreshold) {
                break;
              }
            }

            n.children = n.children.slice(0, j);
          }
        }
      });
    }

    if (partitionLimit && partitionLimit >= 0) {
      root.each(n => {
        if (n.children && n.children.length > partitionLimit) {
          if (!hasDateNode(n)) {
            n.children = n.children.slice(0, partitionLimit);
          }
        }
      });
    } // Compute final weight sums


    root.eachAfter(n => {
      n.sum = n.children ? n.children.reduce((a, v) => a + v.weight, 0) || 1 : 1;
    });

    function getCategory(depth) {
      if (!depth) {
        return 'Metric';
      }

      if (hasTime && depth === 1) {
        return 'Date';
      }

      return levels[depth - (hasTime ? 2 : 1)];
    }

    function getAncestors(d) {
      const ancestors = [d];
      let node = d;

      while (node.parent) {
        ancestors.push(node.parent);
        node = node.parent;
      }

      return ancestors;
    }

    function positionAndPopulate(tip, d) {
      let t = '<table>';

      if (useRichTooltip) {
        const nodes = getAncestors(d);
        nodes.reverse().forEach(n => {
          const atNode = n.depth === d.depth;
          t += '<tbody>';
          t += '<tr>' + '<td>' + '<div ' + ("style='border: 2px solid " + (atNode ? 'black' : 'transparent') + ";") + ("background-color: " + n.color + ";'") + '></div>' + '</td>' + ("<td>" + getCategory(n.depth) + "</td>") + ("<td>" + n.name + "</td>") + ("<td>" + n.disp + "</td>") + '</tr>';
        });
      } else {
        t += '<thead><tr><td colspan="3">' + ("<strong>" + getCategory(d.depth) + "</strong>") + '</td></tr></thead><tbody>';
        t += '<tr>' + '<td>' + ("<div style='border: thin solid grey; background-color: " + d.color + ";'") + '></div>' + '</td>' + ("<td>" + d.name + "</td>") + ("<td>" + d.disp + "</td>") + '</tr>';
      }

      t += '</tbody></table>';

      const [tipX, tipY] = _d.default.mouse(element);

      tip.html(t).style('left', tipX + 15 + "px").style('top', tipY + "px");
    }

    const nodes = init(root);
    let zoomX = w / root.dx;
    let zoomY = h / 1; // Keep text centered in its division

    function transform(d) {
      return "translate(8," + d.dx * zoomY / 2 + ")";
    }

    const g = viz.selectAll('g').data(nodes).enter().append('svg:g').attr('transform', d => "translate(" + x(d.y) + "," + y(d.x) + ")").on('mouseover', d => {
      tooltip.interrupt().transition().duration(100).style('opacity', 0.9);
      positionAndPopulate(tooltip, d);
    }).on('mousemove', d => {
      positionAndPopulate(tooltip, d);
    }).on('mouseout', () => {
      tooltip.interrupt().transition().duration(250).style('opacity', 0);
    }); // When clicking a subdivision, the vis will zoom in to it

    function click(d) {
      if (!d.children) {
        if (d.parent) {
          // Clicking on the rightmost level should zoom in
          return click(d.parent);
        }

        return false;
      }

      zoomX = (d.y ? w - 40 : w) / (1 - d.y);
      zoomY = h / d.dx;
      x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
      y.domain([d.x, d.x + d.dx]);
      const t = g.transition().duration(_d.default.event.altKey ? 7500 : 750).attr('transform', nd => "translate(" + x(nd.y) + "," + y(nd.x) + ")");
      t.select('rect').attr('width', d.dy * zoomX).attr('height', nd => nd.dx * zoomY);
      t.select('text').attr('transform', transform).style('opacity', nd => nd.dx * zoomY > 12 ? 1 : 0);

      _d.default.event.stopPropagation();

      return true;
    }

    g.on('click', click);
    g.append('svg:rect').attr('width', root.dy * zoomX).attr('height', d => d.dx * zoomY);
    g.append('svg:text').attr('transform', transform).attr('dy', '0.35em').style('opacity', d => d.dx * zoomY > 12 ? 1 : 0).text(d => {
      if (!d.disp) {
        return d.name;
      }

      return d.name + ": " + d.disp;
    }); // Apply color scheme

    g.selectAll('rect').style('fill', d => {
      d.color = colorFn(d.name);
      return d.color;
    });
  }

  for (let i = 0; i < data.length; i++) {
    drawVis(i, data);
  }
}

Icicle.displayName = 'Icicle';
Icicle.propTypes = propTypes;
var _default = Icicle;
exports.default = _default;