lucid-ui/lib/components/Point/Point.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _startsWith from "lodash/startsWith";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps } from '../../util/component-types';
import { transformFromCenter } from '../../util/chart-helpers';
import * as chartConstants from '../../constants/charts';
var cx = lucidClassNames.bind('&-Point');
var number = PropTypes.number,
    bool = PropTypes.bool,
    string = PropTypes.string,
    object = PropTypes.object; // These were originally built in a 12x12 grid, except triangles which were
// 14x12 cause triangles are poo.

var PATHS = ['M6,12 C2.686,12 0,9.314 0,6 C0,2.686 2.686,0 6,0 C9.314,-0 12,2.686 12,6 C12,9.314 9.314,12 6,12 z', 'M6,12 C0,12 0,12 0,6 C0,0 -0,0 6,0 C12,0 12,0 12,6 C12,12 12,12 6,12 z', 'M6.034,1.656 C7,0 7,0 7.966,1.656 L13.034,10.344 C14,12 13,12 12,12 L2,12 C1,12 0,12 0.966,10.344 L6.034,1.656 z', 'M7.966,10.344 C7,12 7,12 6.034,10.344 L0.966,1.656 C-0,0 1,0 2,0 L12,0 C13,0 14,0 13.034,1.656 L7.966,10.344 z', 'M2.594,9.406 C-0.812,6 -0.812,6 2.594,2.594 C6,-0.812 6,-0.812 9.406,2.594 C12.812,6 12.812,6 9.406,9.406 C6,12.812 6,12.812 2.594,9.406 z'];
export var Kind;

(function (Kind) {
  Kind[Kind["Circle"] = 0] = "Circle";
  Kind[Kind["Square"] = 1] = "Square";
  Kind[Kind["TriangleUp"] = 2] = "TriangleUp";
  Kind[Kind["TriangleDown"] = 3] = "TriangleDown";
  Kind[Kind["Diamond"] = 4] = "Diamond";
})(Kind || (Kind = {}));

var defaultProps = {
  x: 0,
  y: 0,
  kind: 0,
  color: chartConstants.COLOR_0,
  hasStroke: false,
  scale: 1
};
export var Point = function Point(props) {
  var color = props.color,
      hasStroke = props.hasStroke,
      kind = props.kind,
      x = props.x,
      y = props.y,
      scale = props.scale,
      className = props.className,
      style = props.style,
      passThroughs = _objectWithoutProperties(props, ["color", "hasStroke", "kind", "x", "y", "scale", "className", "style"]);

  var kindIndex = kind % 5;

  var isCustomColor = _startsWith(color, '#');

  var colorStyle = isCustomColor ? {
    fill: color
  } : null; // These transforms are used to center the icon on the x y coordinate
  // provided.

  var transforms = [transformFromCenter(x, y, 6, 6, scale), transformFromCenter(x, y, 6, 6, scale), transformFromCenter(x, y, 7, 6, scale), // triangle
  transformFromCenter(x, y, 7, 6, scale), // triangle
  transformFromCenter(x, y, 6, 6, scale)];
  return /*#__PURE__*/React.createElement("path", _extends({}, omitProps(passThroughs, undefined, _keys(Point.propTypes)), {
    style: _objectSpread(_objectSpread({}, style), colorStyle),
    className: cx(className, '&', _defineProperty({
      '&-has-stroke': hasStroke
    }, "&-".concat(color), !isCustomColor)),
    transform: transforms[kindIndex],
    d: PATHS[kindIndex]
  }));
};
Point.defaultProps = defaultProps;
Point.displayName = 'Point';
Point.peek = {
  description: "\n\t\t\t\t*For use within an `svg`*\n\n\t\t\t\tPoints are typically used for scatter plots or overlaying shapes on\n\t\t\t\tlines.\n\t\t\t",
  categories: ['visualizations', 'geoms']
};
Point.propTypes = {
  style: object,
  className: string,
  hasStroke: bool,
  x: number,
  y: number,
  kind: number,
  color: string,
  scale: number
};
export default Point;