@wix/design-system/dist/cjs/SparklineChart/docs/index.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storySettings = require("../test/storySettings");
var _Box = _interopRequireDefault(require("../../Box"));
var _ = _interopRequireDefault(require(".."));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SparklineChart/docs/index.story.jsx",
  _this = void 0;
var data = [{
  label: new Date('Thu Sep 4 2020'),
  value: 3
}, {
  label: new Date('Thu Sep 5 2020'),
  value: 17
}, {
  label: new Date('Thu Sep 6 2020'),
  value: 18
}, {
  label: new Date('Thu Sep 7 2020'),
  value: 12
}, {
  label: new Date('Thu Sep 8 2020'),
  value: 8
}, {
  label: new Date('Thu Sep 9 2020'),
  value: 7
}, {
  label: new Date('Thu Sep 10 2020'),
  value: 9
}];
var _default = exports["default"] = {
  category: _storySettings.storySettings.category,
  storyName: 'SparklineChart',
  component: _["default"],
  componentPath: '..',
  componentWrapper: function componentWrapper(_ref) {
    var component = _ref.component;
    return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      align: "center",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 35,
        columnNumber: 40
      }
    }, component);
  },
  componentProps: {
    data: data,
    color: '#FF0000',
    getTooltipContent: function getTooltipContent(index) {
      return data[index].label.toLocaleDateString();
    },
    highlightedStartingIndex: 2,
    highlightedEndingIndex: 4,
    width: 400,
    height: 80,
    onHover: function onHover(index) {
      return "Point at index ".concat(index, " is hovered!");
    }
  },
  exampleProps: {
    // Put here presets of props, for more info:
    // https://github.com/wix/wix-ui/blob/master/packages/wix-storybook-utils/docs/usage.md
  },
  sections: [(0, _Sections.header)({
    sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(_["default"].displayName, "/")
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.description)({
      title: 'Description',
      text: 'A tiny chart that provides a visual representation of data.'
    }), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
      title: 'Simple Usage',
      description: "A simple sparkline example. The SparklineChart supports custom tooltip on hover. When getTooltipContent is not set, the tooltip will be disabled ",
      source: " <SparklineChart\n            getTooltipContent={index => <span style={{color: '#ffffff'}}>{index}</span>}\n                data={[\n                    { label: new Date('Thu Sep 4 2020'), value: 3 },\n                    { label: new Date('Thu Sep 5 2020'), value: 17 },\n                    { label: new Date('Thu Sep 6 2020'), value: 18 },\n                    { label: new Date('Thu Sep 7 2020'), value: 12 },\n                    { label: new Date('Thu Sep 8 2020'), value: 8 },\n                    { label: new Date('Thu Sep 9 2020'), value: 7 },\n                    { label: new Date('Thu Sep 10 2020'), value: 9 },\n                  ]}\n          />"
    }), (0, _Sections.example)({
      title: 'Highlighted Area',
      description: 'SparklineChart allows highlighting partial values on the chart line.',
      source: "<SparklineChart\n            data={[\n              { label: new Date('Thu Sep 4 2020'), value: 3 },\n              { label: new Date('Thu Sep 5 2020'), value: 17 },\n              { label: new Date('Thu Sep 6 2020'), value: 18 },\n              { label: new Date('Thu Sep 7 2020'), value: 12 },\n              { label: new Date('Thu Sep 8 2020'), value: 8 },\n              { label: new Date('Thu Sep 9 2020'), value: 7 },\n              { label: new Date('Thu Sep 10 2020'), value: 9 },\n            ]}\n            highlightedStartingIndex={2}\n            highlightedEndingIndex={4}\n           />"
    }), (0, _Sections.example)({
      title: 'Custom Color & Size',
      source: "<SparklineChart\n            data={[\n              { label: new Date('Thu Sep 4 2020'), value: 3 },\n              { label: new Date('Thu Sep 5 2020'), value: 17 },\n              { label: new Date('Thu Sep 6 2020'), value: 18 },\n              { label: new Date('Thu Sep 7 2020'), value: 12 },\n              { label: new Date('Thu Sep 8 2020'), value: 8 },\n              { label: new Date('Thu Sep 9 2020'), value: 7 },\n              { label: new Date('Thu Sep 10 2020'), value: 9 }\n             ]}\n            color='#ee00ff'\n            width={400}\n            height={80}\n           />"
    })]
  })].concat((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};