rebrand

2 년 전 · f4d6dbbe2b
--- a/.gitignore
+++ b/.gitignore
@@ -60,8 +60,6 @@ typings/
 # next.js build output
 .next

 # npm build output
 dist
 docs/assets/

 .DS_Store

 .DS_Store
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="VcsDirectoryMappings">
    <mapping directory="$PROJECT_DIR$" vcs="Git" />
  </component>
 </project>
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,7 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ChangeListManager">
    <list default="true" id="5e3d8f02-f7dd-4684-9ff7-f2b0b9acabbe" name="Default Changelist" comment="" />
    <list default="true" id="5e3d8f02-f7dd-4684-9ff7-f2b0b9acabbe" name="Default Changelist" comment="">
      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/Makefile" beforeDir="false" afterPath="$PROJECT_DIR$/Makefile" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/docs/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/docs/index.html" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/rollup.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/rollup.config.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/js/charts/BaseChart.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/charts/BaseChart.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/js/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/js/index.js" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -22,6 +34,7 @@
  <component name="PropertiesComponent">
    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
    <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
    <property name="WebServerToolWindowFactoryState" value="true" />
    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
    <property name="node.js.detected.package.eslint" value="true" />
@@ -42,22 +55,48 @@
      <updated>1666846241879</updated>
      <workItem from="1666846242985" duration="331000" />
      <workItem from="1666846601117" duration="7000" />
      <workItem from="1678859449907" duration="20000" />
      <workItem from="1678859449907" duration="671000" />
      <workItem from="1683357427507" duration="166000" />
      <workItem from="1683357819003" duration="26000" />
    </task>
    <task id="LOCAL-00001" summary="Initial Commit">
      <created>1678859498882</created>
      <option name="number" value="00001" />
      <option name="presentableId" value="LOCAL-00001" />
      <option name="project" value="LOCAL" />
      <updated>1678859498882</updated>
    </task>
    <option name="localTasksCounter" value="2" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
    <option name="version" value="2" />
  </component>
  <component name="VcsManagerConfiguration">
    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
    <option name="CHECK_NEW_TODO" value="false" />
    <ignored-roots>
      <path value="$PROJECT_DIR$" />
    </ignored-roots>
    <MESSAGE value="Initial Commit" />
    <option name="LAST_COMMIT_MESSAGE" value="Initial Commit" />
  </component>
  <component name="WindowStateProjectService">
    <state x="1185" y="435" key="FileChooserDialogImpl" timestamp="1678859476499">
      <screen x="0" y="0" width="2560" height="1408" />
    </state>
    <state x="1185" y="435" key="FileChooserDialogImpl/0.0.2560.1408/-1920.471.1920.1048@0.0.2560.1408" timestamp="1678859476499" />
    <state x="906" y="338" key="SettingsEditor" timestamp="1678859468432">
      <screen x="0" y="0" width="2560" height="1408" />
    </state>
    <state x="906" y="338" key="SettingsEditor/0.0.2560.1408/-1920.471.1920.1048@0.0.2560.1408" timestamp="1678859468432" />
    <state x="997" y="426" key="Vcs.Push.Dialog.v2" timestamp="1678859527053">
      <screen x="0" y="0" width="2560" height="1408" />
    </state>
    <state x="997" y="426" key="Vcs.Push.Dialog.v2/0.0.2560.1408/-1920.471.1920.1048@0.0.2560.1408" timestamp="1678859527053" />
    <state x="987" y="429" width="587" height="592" key="find.popup" timestamp="1683357578843">
      <screen x="0" y="0" width="2560" height="1392" />
    </state>
    <state x="987" y="429" width="587" height="592" key="find.popup/0.0.2560.1392/-1920.471.1920.1032@0.0.2560.1392" timestamp="1683357578843" />
  </component>
 </project>
--- a/+ 1
+++ b/+ 1
@@ -6,7 +6,7 @@ SRCDIR									= $(BASEDIR)/src
 DISTDIR									= $(BASEDIR)/dist
 DOCSDIR									= $(BASEDIR)/docs

 PROJECT									= influxframework-charts
 PROJECT									= xhiveframework-charts

 NODEMOD									= $(BASEDIR)/node_modules
 NODEBIN									= $(NODEMOD)/.bin
--- a/README.md
+++ b/README.md
@@ -1,30 +1,30 @@
 <div align="center">
    <img src="https://github.com/influxframework/design/blob/master/logos/logo-2019/influxframework-charts-logo.png" height="128">
    <a href="https://influxframework.github.io/charts">
        <h2>InfluxFramework Charts</h2>
    <img src="https://github.com/xhiveframework/design/blob/master/logos/logo-2019/xhiveframework-charts-logo.png" height="128">
    <a href="https://xhiveframework.github.io/charts">
        <h2>XhiveFramework Charts</h2>
    </a>
    <p align="center">
        <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
        <a href="https://influxframework.com/charts">
        <a href="https://xhiveframework.com/charts">
            <b>Explore Demos » </b>
        </a>
        <a href="https://codesandbox.io/s/influxframework-charts-demo-viqud">
        <a href="https://codesandbox.io/s/xhiveframework-charts-demo-viqud">
            <b> Edit at CodeSandbox »</b>
        </a>
        <a href="https://influxframework.com/charts/docs">
        <a href="https://xhiveframework.com/charts/docs">
            <b>Documentation » </b>
        </a>
    </p>
 </div>

 <p align="center">
    <a href="https://bundlephobia.com/result?p=influxframework-charts">
        <img src="https://img.shields.io/bundlephobia/minzip/influxframework-charts">
    <a href="https://bundlephobia.com/result?p=xhiveframework-charts">
        <img src="https://img.shields.io/bundlephobia/minzip/xhiveframework-charts">
    </a>
 </p>

 <p align="center">
    <a href="https://influxframework.github.io/charts">
    <a href="https://xhiveframework.github.io/charts">
        <img src=".github/example.gif">
    </a>
 </p>
@@ -32,7 +32,7 @@
 ### Contents
 * [Installation](#installation)
 * [Usage](#usage)
 * [Contribute](https://influxframework.com/charts/docs/contributing)
 * [Contribute](https://xhiveframework.com/charts/docs/contributing)
 * [License](#license)

 #### Installation
@@ -41,27 +41,27 @@
 Install via [`npm`](https://www.npmjs.com/get-npm):

 ```sh
 $ npm install influxframework-charts
 $ npm install xhiveframework-charts
 ```

 and include in your project:
 ```js
 import { Chart } from "influxframework-charts"
 import { Chart } from "xhiveframework-charts"
 ```

 Or include following for es-modules(eg:vuejs):
 ```js
 import { Chart } from 'influxframework-charts/dist/influxframework-charts.esm.js'
 import { Chart } from 'xhiveframework-charts/dist/xhiveframework-charts.esm.js'
 // import css
 import 'influxframework-charts/dist/influxframework-charts.min.css'
 import 'xhiveframework-charts/dist/xhiveframework-charts.min.css'
 ```

 ##### or include within your HTML

 ```html
 <script src="https://cdn.jsdelivr.net/npm/influxframework-charts@1.6.1/dist/influxframework-charts.min.umd.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/xhiveframework-charts@1.6.1/dist/xhiveframework-charts.min.umd.js"></script>
 <!-- or -->
 <script src="https://unpkg.com/influxframework-charts@1.6.1/dist/influxframework-charts.min.umd.js"></script>
 <script src="https://unpkg.com/xhiveframework-charts@1.6.1/dist/xhiveframework-charts.min.umd.js"></script>
 ```

 #### Usage
@@ -82,7 +82,7 @@ const data = {
    ]
 }

 const chart = new influxframework.Chart("#chart", {  // or a DOM element,
 const chart = new xhiveframework.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
@@ -92,9 +92,9 @@ const chart = new influxframework.Chart("#chart", {  // or a DOM element,
 })
 ```

 Or for es-modules (replace `new influxframework.Chart()` with `new Chart()`):
 Or for es-modules (replace `new xhiveframework.Chart()` with `new Chart()`):
 ```diff
 - const chart = new influxframework.Chart("#chart", {
 - const chart = new xhiveframework.Chart("#chart", {
 + const chart = new Chart("#chart", {  // or a DOM element,
                                    // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
@@ -116,4 +116,4 @@ If you want to contribute:
 #### License
 This repository has been released under the [MIT License](LICENSE)

 ------------------
 ------------------
--- a/dist/xhiveframework-charts.cjs.js
+++ b/dist/xhiveframework-charts.cjs.js
--- a/dist/xhiveframework-charts.cjs.js.map
+++ b/dist/xhiveframework-charts.cjs.js.map
--- a/dist/xhiveframework-charts.esm.js
+++ b/dist/xhiveframework-charts.esm.js
--- a/dist/xhiveframework-charts.esm.js.map
+++ b/dist/xhiveframework-charts.esm.js.map
--- a/dist/xhiveframework-charts.min.cjs.js
+++ b/dist/xhiveframework-charts.min.cjs.js
--- a/dist/xhiveframework-charts.min.cjs.js.map
+++ b/dist/xhiveframework-charts.min.cjs.js.map
--- a/dist/xhiveframework-charts.min.css
+++ b/dist/xhiveframework-charts.min.css
@@ -0,0 +1,121 @@
 :root {
  --charts-label-color: #313b44;
  --charts-axis-line-color: #f4f5f6;
  --charts-tooltip-title: var(--charts-label-color);
  --charts-tooltip-label: var(--charts-label-color);
  --charts-tooltip-value: #192734;
  --charts-tooltip-bg: #ffffff;
  --charts-stroke-width: 2px;
  --charts-dataset-circle-stroke: #ffffff;
  --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
  --charts-legend-label: var(--charts-label-color);
  --charts-legend-value: var(--charts-label-color); }

 .chart-container {
  position: relative;
  /* for absolutely positioned tooltip */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
  .chart-container .axis,
  .chart-container .chart-label {
    fill: var(--charts-label-color); }
    .chart-container .axis line,
    .chart-container .chart-label line {
      stroke: var(--charts-axis-line-color); }
  .chart-container .dataset-units circle {
    stroke: var(--charts-dataset-circle-stroke);
    stroke-width: var(--charts-dataset-circle-stroke-width); }
  .chart-container .dataset-units path {
    fill: none;
    stroke-opacity: 1;
    stroke-width: var(--charts-stroke-width); }
  .chart-container .dataset-path {
    stroke-width: var(--charts-stroke-width); }
  .chart-container .path-group path {
    fill: none;
    stroke-opacity: 1;
    stroke-width: var(--charts-stroke-width); }
  .chart-container line.dashed {
    stroke-dasharray: 5, 3; }
  .chart-container .axis-line .specific-value {
    text-anchor: start; }
  .chart-container .axis-line .y-line {
    text-anchor: end; }
  .chart-container .axis-line .x-line {
    text-anchor: middle; }
  .chart-container .legend-dataset-label {
    fill: var(--charts-legend-label);
    font-weight: 600; }
  .chart-container .legend-dataset-value {
    fill: var(--charts-legend-value); }

 .graph-svg-tip {
  position: absolute;
  z-index: 99999;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  background: var(--charts-tooltip-bg);
  box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 40px 30px -30px rgba(17, 43, 66, 0.1);
  border-radius: 6px; }
  .graph-svg-tip ul {
    padding-left: 0;
    display: flex; }
  .graph-svg-tip ol {
    padding-left: 0;
    display: flex; }
  .graph-svg-tip ul.data-point-list li {
    min-width: 90px;
    font-weight: 600; }
  .graph-svg-tip .svg-pointer {
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: 2px;
    background: var(--charts-tooltip-bg);
    transform: rotate(45deg);
    margin-top: -7px;
    margin-left: -6px; }
  .graph-svg-tip.comparison {
    text-align: left;
    padding: 0px;
    pointer-events: none; }
    .graph-svg-tip.comparison .title {
      display: block;
      padding: 16px;
      margin: 0;
      color: var(--charts-tooltip-title);
      font-weight: 600;
      line-height: 1;
      pointer-events: none;
      text-transform: uppercase; }
      .graph-svg-tip.comparison .title strong {
        color: var(--charts-tooltip-value); }
    .graph-svg-tip.comparison ul {
      margin: 0;
      white-space: nowrap;
      list-style: none; }
      .graph-svg-tip.comparison ul.tooltip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px; }
    .graph-svg-tip.comparison li {
      display: inline-block;
      display: flex;
      flex-direction: row;
      font-weight: 600;
      line-height: 1;
      padding: 5px 15px 15px 15px; }
      .graph-svg-tip.comparison li .tooltip-legend {
        height: 12px;
        width: 12px;
        margin-right: 8px;
        border-radius: 2px; }
      .graph-svg-tip.comparison li .tooltip-label {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.25;
        max-width: 150px;
        white-space: normal;
        color: var(--charts-tooltip-label); }
      .graph-svg-tip.comparison li .tooltip-value {
        color: var(--charts-tooltip-value); }
--- a/dist/xhiveframework-charts.min.esm.js
+++ b/dist/xhiveframework-charts.min.esm.js
--- a/dist/xhiveframework-charts.min.esm.js.map
+++ b/dist/xhiveframework-charts.min.esm.js.map
--- a/dist/xhiveframework-charts.min.umd.js
+++ b/dist/xhiveframework-charts.min.umd.js
--- a/dist/xhiveframework-charts.min.umd.js.map
+++ b/dist/xhiveframework-charts.min.umd.js.map
--- a/dist/xhiveframework-charts.umd.js
+++ b/dist/xhiveframework-charts.umd.js
--- a/dist/xhiveframework-charts.umd.js.map
+++ b/dist/xhiveframework-charts.umd.js.map
--- a/docs/assets/css/bootstrap.min.css
+++ b/docs/assets/css/bootstrap.min.css
--- a/docs/assets/css/hljs.css
+++ b/docs/assets/css/hljs.css
@@ -0,0 +1,99 @@
 /*
  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 */

 .hljs {
  display: block;
  color: #36414c;
  overflow-x: auto;
  padding: 0.5em;
  background: #F8F8F9;
  border-radius: 3px;
 }

 .hljs-comment,
 .hljs-quote {
 color: #998;
 font-style: italic;
 }

 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
 color: #333;
 font-weight: bold;
 }

 .hljs-number,
 .hljs-literal,
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
 color: #008080;
 }

 .hljs-string,
 .hljs-doctag {
 color: #d14;
 }

 .hljs-title,
 .hljs-section,
 .hljs-selector-id {
 color: #900;
 font-weight: bold;
 }

 .hljs-subst {
 font-weight: normal;
 }

 .hljs-type,
 .hljs-class .hljs-title {
 color: #458;
 font-weight: bold;
 }

 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
 color: #000080;
 font-weight: normal;
 }

 .hljs-regexp,
 .hljs-link {
 color: #009926;
 }

 .hljs-symbol,

 .hljs-bullet {
 color: #990073;
 }

 .hljs-built_in,
 .hljs-builtin-name {
 color: #0086b3;
 }

 .hljs-meta {
 color: #999;
 font-weight: bold;
 }

 .hljs-deletion {
 background: #fdd;
 }

 .hljs-addition {
 background: #dfd;
 }

 .hljs-emphasis {
 font-style: italic;
 }

 .hljs-strong {
 font-weight: bold;
 }
--- a/docs/assets/css/index.css
+++ b/docs/assets/css/index.css
@@ -0,0 +1,110 @@
 body {
 	/* container styles */
    max-width: 720px;
    margin: auto;

 	font-family: "proxima-nova", sans-serif;
 	font-size: 15px;
 	color: #6c7680;
 	text-rendering: optimizeLegibility !important;
 	line-height: 1.5em;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .lead,
 .page-sidebar,
 .breadcrumb,
 .label,
 .h6,
 .sans,
 blockquote {
 	font-family: "proxima-nova", sans-serif;
 	color: #36414C;
 }

 header {
 	margin: 4rem 0;  /* SAME 1 */
 	font-size: 1.6em;
 	font-weight: 300;
 	text-align: center;
 }
 header .lead-text {
 	line-height: 3rem;
 	margin: 2rem 0;
 }
 .demo-tip {
 	margin-top: 1rem;   /* SAME 2 */
 	font-size: 1rem;
 }
 section {
 	margin: 4em 0;   /* SAME 1 */
 }
 h1 {
 	font-size: 3.5rem;
    margin-bottom: 1.5rem;
 }
 h1, h6 {
 	font-weight: 700;
 }
 .btn {
 	outline: none !important;
 }
 .blue.button {
 	color: #fff;
 	background: #7575ff;
 	border: 0px;
 	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
 }
 .blue.button:hover {
 	background: #5b5be5;
 }
 .large.button {
 	font-size: 1.33em;
 	padding: 12px 24px 10px;
 	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
 }
 a {
 	color: #5E64FF;
 }
 a, a:focus, a:hover {
 	transition: color 0.3s, border 0.3s, background-color 0.3s;
 }


 /* BaseCSS */
 .margin-top {
 	margin-top: 1rem; /* SAME 2 */
 }
 .mv1 {
 	margin: 2em 0 1em 0;
 }
 .border {
 	border: 1px solid #ddd;
 	border-radius: 3px;
 }


 /* Moon images */
 .image-container {
 	padding: 3px;
 }
 .image-container img{
 	display: block;
    width: 100%;
 }
 .content-data p {
 	margin-bottom: 5px;
 	font-size: 12px;
 }


 .text-center {
 	text-align: center;
 }
--- a/docs/assets/css/reset.css
+++ b/docs/assets/css/reset.css
@@ -0,0 +1,353 @@
 /*!
 *this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise*
 * Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -ms-overflow-style: scrollbar;
   -webkit-tap-highlight-color: transparent;
   --line-height: 3;
   line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
 }

 @-ms-viewport {
   width: device-width;
 }

 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }

 body {
   margin: 0;
   font-size: 1em;
   font-weight: 400;
   /* line-height: 1.5; */
   text-align: left;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans",  Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #36414c;
   font-weight:normal;
   -webkit-text-size-adjust: 100%;
   -webkit-font-feature-settings: "kern" 1;
   -moz-font-feature-settings: "kern" 1;
   -o-font-feature-settings: "kern" 1;
   font-feature-settings: "kern" 1;
   font-kerning: normal;
   text-rendering: optimizeLegibility;
 }

 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

 hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }

 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 1.6rem;
 }

 p {
   margin-top: 0;
   margin-bottom: 1rem;
 }

 abbr[title],
 abbr[data-original-title] {
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
   cursor: help;
   border-bottom: 0;
 }

 address {
   margin-bottom: 1rem;
   font-style: normal;
   line-height: inherit;
 }

 ol,
 ul,
 dl {
   margin-top: 0;
   margin-bottom: 1rem;
 }

 ol ol,
 ul ul,
 ol ul,
 ul ol {
   margin-bottom: 0;
 }

 dt {
   font-weight: 700;
 }

 dd {
   margin-bottom: .5rem;
   margin-left: 0;
 }

 blockquote {
   margin: 0 0 1rem;
 }

 dfn {
   font-style: italic;
 }

 b,
 strong {
   font-weight: bolder;
 }

 small {
   font-size: 80%;
 }

 sub,
 sup {
   position: relative;
   font-size: 75%;
   line-height: 0;
   vertical-align: baseline;
 }

 sub {
   bottom: -.25em;
 }

 sup {
   top: -.5em;
 }

 a {
   color: #007bff;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
 }

 a:hover {
   color: #0056b3;
   text-decoration: underline;
 }

 a:not([href]):not([tabindex]) {
   color: inherit;
   text-decoration: none;
 }

 a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
   color: inherit;
   text-decoration: none;
 }

 a:not([href]):not([tabindex]):focus {
   outline: 0;
 }

 pre,
 code,
 kbd,
 samp {
   font-family: monospace, monospace;
   font-size: 1em;
 }

 pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
   -ms-overflow-style: scrollbar;
 }

 figure {
   margin: 0 0 1rem;
 }

 img {
   vertical-align: middle;
   border-style: none;
 }

 svg:not(:root) {
   overflow: hidden;
 }

 a,
 area,
 button,
 [role="button"],
 input:not([type="range"]),
 label,
 select,
 summary,
 textarea {
   -ms-touch-action: manipulation;
   touch-action: manipulation;
 }

 table {
   border-collapse: collapse;
 }

 caption {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   color: #6c757d;
   text-align: left;
   caption-side: bottom;
 }

 th {
   text-align: inherit;
 }

 label {
   display: inline-block;
   margin-bottom: .5rem;
 }

 button {
   border-radius: 0;
 }

 button:focus {
   outline: 1px dotted;
   outline: 5px auto -webkit-focus-ring-color;
 }

 input,
 button,
 select,
 optgroup,
 textarea {
   margin: 0;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
 }

 button,
 input {
   overflow: visible;
 }

 button,
 select {
   text-transform: none;
 }

 button,
 html [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }

 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }

 input[type="radio"],
 input[type="checkbox"] {
   box-sizing: border-box;
   padding: 0;
 }

 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
   -webkit-appearance: listbox;
 }

 textarea {
   overflow: auto;
   resize: vertical;
 }

 fieldset {
   min-width: 0;
   padding: 0;
   margin: 0;
   border: 0;
 }

 legend {
   display: block;
   width: 100%;
   max-width: 100%;
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
   color: inherit;
   white-space: normal;
 }

 progress {
   vertical-align: baseline;
 }

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

 [type="search"] {
   outline-offset: -2px;
   -webkit-appearance: none;
 }

 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }

 ::-webkit-file-upload-button {
   font: inherit;
   -webkit-appearance: button;
 }

 output {
   display: inline-block;
 }

 summary {
   display: list-item;
   cursor: pointer;
 }

 template {
   display: none;
 }

 [hidden] {
   display: none !important;
 }
 /*# sourceMappingURL=bootstrap-reboot.css.map */
--- a/docs/assets/img/callisto.jpg
+++ b/docs/assets/img/callisto.jpg
--- a/docs/assets/img/europa.jpg
+++ b/docs/assets/img/europa.jpg
--- a/docs/assets/img/ganymede.jpg
+++ b/docs/assets/img/ganymede.jpg
--- a/docs/assets/img/influxframework-bird.png
+++ b/docs/assets/img/influxframework-bird.png
--- a/docs/assets/img/io.jpg
+++ b/docs/assets/img/io.jpg
--- a/docs/assets/js/data.js
+++ b/docs/assets/js/data.js
@@ -0,0 +1,278 @@
 import { MONTH_NAMES_SHORT } from "../../../src/js/utils/date-utils";

 // Composite Chart
 // ================================================================================
 const reportCountList = [
 	152,
 	222,
 	199,
 	287,
 	534,
 	709,
 	1179,
 	1256,
 	1632,
 	1856,
 	1850,
 ];

 export const lineCompositeData = {
 	labels: [
 		"2007",
 		"2008",
 		"2009",
 		"2010",
 		"2011",
 		"2012",
 		"2013",
 		"2014",
 		"2015",
 		"2016",
 		"2017",
 	],

 	yMarkers: [
 		{
 			label: "Average 100 reports/month",
 			value: 1200,
 			options: { labelPos: "left" },
 		},
 	],

 	datasets: [
 		{
 			name: "Events",
 			values: reportCountList,
 		},
 	],
 };

 export const fireball_5_25 = [
 	[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1],
 	[2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4],
 	[5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1],
 	[0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8],
 	[6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11],
 	[7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20],
 	[13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29],
 	[24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18],
 	[31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24],
 	[32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32],
 	[31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50],
 ];
 export const fireball_2_5 = [
 	[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20],
 	[11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24],
 	[20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9],
 	[7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33],
 	[38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53],
 	[50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69],
 	[54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87],
 	[84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93],
 	[73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89],
 	[106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156],
 	[81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171],
 ];
 export const fireballOver25 = [
 	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
 	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
 	[1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
 	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],
 	[3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1],
 	[2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4],
 	[7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9],
 	[5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9],
 	[5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2],
 	[5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3],
 	[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12],
 ];

 export const barCompositeData = {
 	labels: MONTH_NAMES_SHORT,
 	datasets: [
 		{
 			name: "Over 25 reports",
 			values: fireballOver25[9],
 		},
 		{
 			name: "5 to 25 reports",
 			values: fireball_5_25[9],
 		},
 		{
 			name: "2 to 5 reports",
 			values: fireball_2_5[9],
 		},
 	],
 };

 // Demo Chart multitype Chart
 // ================================================================================
 export const typeData = {
 	labels: [
 		"12am-3am",
 		"3am-6am",
 		"6am-9am",
 		"9am-12pm",
 		"12pm-3pm",
 		"3pm-6pm",
 		"6pm-9pm",
 		"9pm-12am",
 	],

 	yMarkers: [
 		{
 			label: "Marker",
 			value: 43,
 			options: { labelPos: "left" },
 			// type: 'dashed'
 		},
 	],

 	yRegions: [
 		{
 			label: "Region",
 			start: -10,
 			end: 50,
 			options: { labelPos: "right" },
 		},
 	],

 	datasets: [
 		{
 			name: "Some Data",
 			values: [18, 40, 30, 35, 8, 52, 17, -4],
 			axisPosition: "right",
 			chartType: "bar",
 		},
 		{
 			name: "Another Set",
 			values: [30, 50, -10, 15, 18, 32, 27, 14],
 			axisPosition: "right",
 			chartType: "bar",
 		},
 		{
 			name: "Yet Another",
 			values: [15, 20, -3, -15, 58, 12, -17, 37],
 			chartType: "line",
 		},
 	],
 };

 export const trendsData = {
 	labels: [
 		1967,
 		1968,
 		1969,
 		1970,
 		1971,
 		1972,
 		1973,
 		1974,
 		1975,
 		1976,
 		1977,
 		1978,
 		1979,
 		1980,
 		1981,
 		1982,
 		1983,
 		1984,
 		1985,
 		1986,
 		1987,
 		1988,
 		1989,
 		1990,
 		1991,
 		1992,
 		1993,
 		1994,
 		1995,
 		1996,
 		1997,
 		1998,
 		1999,
 		2000,
 		2001,
 		2002,
 		2003,
 		2004,
 		2005,
 		2006,
 		2007,
 		2008,
 		2009,
 		2010,
 		2011,
 		2012,
 		2013,
 		2014,
 		2015,
 		2016,
 	],
 	datasets: [
 		{
 			values: [
 				132.9,
 				150.0,
 				149.4,
 				148.0,
 				94.4,
 				97.6,
 				54.1,
 				49.2,
 				22.5,
 				18.4,
 				39.3,
 				131.0,
 				220.1,
 				218.9,
 				198.9,
 				162.4,
 				91.0,
 				60.5,
 				20.6,
 				14.8,
 				33.9,
 				123.0,
 				211.1,
 				191.8,
 				203.3,
 				133.0,
 				76.1,
 				44.9,
 				25.1,
 				11.6,
 				28.9,
 				88.3,
 				136.3,
 				173.9,
 				170.4,
 				163.6,
 				99.3,
 				65.3,
 				45.8,
 				24.7,
 				12.6,
 				4.2,
 				4.8,
 				24.9,
 				80.8,
 				84.5,
 				94.0,
 				113.3,
 				69.8,
 				39.8,
 			],
 		},
 	],
 };

 export const moonData = {
 	names: ["Ganymede", "Callisto", "Io", "Europa"],
 	masses: [14819000, 10759000, 8931900, 4800000],
 	distances: [1070.412, 1882.709, 421.7, 671.034],
 	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
 };
--- a/docs/assets/js/demoConfig.js
+++ b/docs/assets/js/demoConfig.js
@@ -0,0 +1,55 @@
 import { lineCompositeData, barCompositeData } from './data';

 export default {
 	lineComposite: {
 		elementID: "#chart-composite-1",
 		options: {
 			title: "Fireball/Bolide Events - Yearly (reported)",
 			data: lineCompositeData,
 			type: "line",
 			height: 190,
 			colors: ["green"],
 			isNavigable: 1,
 			valuesOverPoints: 1,

 			lineOptions: {
 				dotSize: 8
 			}
 		}
 	},

 	barComposite: {
 		elementID: "#chart-composite-2",
 		options: {
 			data: barCompositeData,
 			type: "bar",
 			height: 210,
 			colors: ["violet", "light-blue", "#46a9f9"],
 			valuesOverPoints: 1,
 			axisOptions: {
 				xAxisMode: "tick",
 				shortenYAxisNumbers: true
 			},
 			barOptions: {
 				stacked: 1
 			}
 		}
 	},

 	demoMain: {
 		elementID: "",
 		options: {
 			title: "My Awesome Chart",
 			data: "typeData",
 			type: "axis-mixed",
 			height: 300,
 			colors: ["purple", "magenta", "light-blue"],
 			maxSlices: 10,

 			tooltipOptions: {
 				formatTooltipX: d => (d + '').toUpperCase(),
 				formatTooltipY: d => d + ' pts',
 			}
 		}
 	}
 };
--- a/docs/assets/js/frappe-charts.min.js.map
+++ b/docs/assets/js/frappe-charts.min.js.map
--- a/docs/assets/js/highlight.pack.js
+++ b/docs/assets/js/highlight.pack.js
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@@ -0,0 +1,375 @@
 import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
 import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
 /* eslint-disable no-unused-vars */
 import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
 	barCompositeData, typeData, trendsData, moonData } from './data';
 /* eslint-enable no-unused-vars */
 import demoConfig from './demoConfig';
 // import { lineComposite, barComposite } from './demoConfig';
 // ================================================================================

 let Chart = xhiveframework.Chart; // eslint-disable-line no-undef

 let lc = demoConfig.lineComposite;
 let lineCompositeChart = new Chart (lc.elementID, lc.options);

 let bc = demoConfig.barComposite;
 let barCompositeChart = new Chart (bc.elementID, bc.options);

 lineCompositeChart.parent.addEventListener('data-select', (e) => {
 	let i = e.index;
 	barCompositeChart.updateDatasets([
 		fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
 	]);
 });

 // ================================================================================

 let customColors = ['purple', 'magenta', 'light-blue'];
 let typeChartArgs = {
 	title: "My Awesome Chart",
 	data: typeData,
 	type: 'axis-mixed',
 	height: 300,
 	colors: customColors,

 	// maxLegendPoints: 6,
 	maxSlices: 10,

 	tooltipOptions: {
 		formatTooltipX: d => (d + '').toUpperCase(),
 		formatTooltipY: d => d + ' pts',
 	}
 };

 let aggrChart = new Chart("#chart-aggr", typeChartArgs);

 Array.prototype.slice.call(
 	document.querySelectorAll('.aggr-type-buttons button')
 ).map(el => {
 	el.addEventListener('click', (e) => {
 		let btn = e.target;
 		let type = btn.getAttribute('data-type');
 		typeChartArgs.type = type;
 		if(type !== 'axis-mixed') {
 			typeChartArgs.colors = undefined;
 		} else {
 			typeChartArgs.colors = customColors;
 		}

 		if(type !== 'percentage') {
 			typeChartArgs.height = 300;
 		} else {
 			typeChartArgs.height = undefined;
 		}

 		let newChart = new Chart("#chart-aggr", typeChartArgs);
 		if(newChart){
 			aggrChart = newChart;
 		}
 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-aggr').addEventListener('click', () => {
 	aggrChart.export();
 });

 // Update values chart
 // ================================================================================
 let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
 	"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
 	"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];

 let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
 let updateDataAllValues = Array.from({length: 30}, getRandom);

 // We're gonna be shuffling this
 let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);

 let getUpdateData = (source_array, length=10) => {
 	let indices = updateDataAllIndices.slice(0, length);
 	return indices.map((index) => source_array[index]);
 };

 let updateData = {
 	labels: getUpdateData(updateDataAllLabels),
 	datasets: [{
 		"values": getUpdateData(updateDataAllValues)
 	}],
 	yMarkers: [
 		{
 			label: "Altitude",
 			value: 25,
 			type: 'dashed'
 		}
 	],
 	yRegions: [
 		{
 			label: "Range",
 			start: 10,
 			end: 45
 		},
 	],
 };

 let updateChart = new Chart("#chart-update", {
 	data: updateData,
 	type: 'line',
 	height: 300,
 	colors: ['#ff6c03'],
 	lineOptions: {
 		// hideLine: 1,
 		regionFill: 1
 	},
 });

 let chartUpdateButtons = document.querySelector('.chart-update-buttons');

 chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
 	shuffle(updateDataAllIndices);
 	let value = getRandom();
 	let start = getRandom();
 	let end = getRandom();
 	let data = {
 		labels: updateDataAllLabels.slice(0, 10),
 		datasets: [{values: getUpdateData(updateDataAllValues)}],
 		yMarkers: [
 			{
 				label: "Altitude",
 				value: value,
 				type: 'dashed'
 			}
 		],
 		yRegions: [
 			{
 				label: "Range",
 				start: start,
 				end: end
 			},
 		],
 	};
 	updateChart.update(data);
 });

 chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
 	let index = updateChart.state.datasetLength; // last index to add
 	if(index >= updateDataAllIndices.length) return;
 	updateChart.addDataPoint(
 		updateDataAllLabels[index], [updateDataAllValues[index]]
 	);
 });

 chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
 	updateChart.removeDataPoint();
 });

 document.querySelector('.export-update').addEventListener('click', () => {
 	updateChart.export();
 });

 // Trends Chart
 // ================================================================================

 let plotChartArgs = {
 	title: "Mean Total Sunspot Count - Yearly",
 	data: trendsData,
 	type: 'line',
 	height: 300,
 	colors: ['#238e38'],
 	lineOptions: {
 		hideDots: 1,
 		heatline: 1,
 	},
 	axisOptions: {
 		xAxisMode: 'tick',
 		yAxisMode: 'span',
 		xIsSeries: 1
 	}
 };

 let trendsChart = new Chart("#chart-trends", plotChartArgs);

 Array.prototype.slice.call(
 	document.querySelectorAll('.chart-plot-buttons button')
 ).map(el => {
 	el.addEventListener('click', (e) => {
 		let btn = e.target;
 		let type = btn.getAttribute('data-type');
 		let config = {};
 		config[type] = 1;

 		if(['regionFill', 'heatline'].includes(type)) {
 			config.hideDots = 1;
 		}

 		// plotChartArgs.init = false;
 		plotChartArgs.lineOptions = config;

 		new Chart("#chart-trends", plotChartArgs);

 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-trends').addEventListener('click', () => {
 	trendsChart.export();
 });


 // Event chart
 // ================================================================================



 let eventsData = {
 	labels: ["Ganymede", "Callisto", "Io", "Europa"],
 	datasets: [
 		{
 			"values": moonData.distances,
 			"formatted": moonData.distances.map(d => d*1000 + " km")
 		}
 	]
 };

 let eventsChart = new Chart("#chart-events", {
 	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
 	data: eventsData,
 	type: 'bar',
 	height: 330,
 	colors: ['grey'],
 	isNavigable: 1,
 });

 let dataDiv = document.querySelector('.chart-events-data');

 eventsChart.parent.addEventListener('data-select', (e) => {
 	let name = moonData.names[e.index];
 	dataDiv.querySelector('.moon-name').innerHTML = name;
 	dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
 	dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
 	dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
 	dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
 });

 // Heatmap
 // ================================================================================

 let today = new Date();
 let start = clone(today);
 addDays(start, 4);
 let end = clone(start);
 start.setFullYear( start.getFullYear() - 2 );
 end.setFullYear( end.getFullYear() - 1 );

 let dataPoints = {};

 let startTs = timestampSec(start);
 let endTs = timestampSec(end);

 startTs = timestampToMidnight(startTs);
 endTs = timestampToMidnight(endTs, true);

 while (startTs < endTs) {
 	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
 	startTs += SEC_IN_DAY;
 }

 const heatmapData = {
 	dataPoints: dataPoints,
 	start: start,
 	end: end
 };

 let heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,
 	type: 'heatmap',
 	discreteDomains: 1,
 	countLabel: 'Level',
 	colors: HEATMAP_COLORS_BLUE,
 	legendScale: [0, 1, 2, 4, 5]
 };
 let heatmapChart = new Chart("#chart-heatmap", heatmapArgs);

 Array.prototype.slice.call(
 	document.querySelectorAll('.heatmap-mode-buttons button')
 ).map(el => {
 	el.addEventListener('click', (e) => {
 		let btn = e.target;
 		let mode = btn.getAttribute('data-mode');
 		let discreteDomains = 0;

 		if(mode === 'discrete') {
 			discreteDomains = 1;
 		}

 		let colors = [];
 		let colors_mode = document
 			.querySelector('.heatmap-color-buttons .active')
 			.getAttribute('data-color');
 		if(colors_mode === 'halloween') {
 			colors = HEATMAP_COLORS_YELLOW;
 		} else if (colors_mode === 'blue') {
 			colors = HEATMAP_COLORS_BLUE;
 		}

 		heatmapArgs.discreteDomains = discreteDomains;
 		heatmapArgs.colors = colors;
 		new Chart("#chart-heatmap", heatmapArgs);

 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 Array.prototype.slice.call(
 	document.querySelectorAll('.heatmap-color-buttons button')
 ).map(el => {
 	el.addEventListener('click', (e) => {
 		let btn = e.target;
 		let colors_mode = btn.getAttribute('data-color');
 		let colors = [];

 		if(colors_mode === 'halloween') {
 			colors = HEATMAP_COLORS_YELLOW;
 		} else if (colors_mode === 'blue') {
 			colors = HEATMAP_COLORS_BLUE;
 		}

 		let discreteDomains = 1;

 		let view_mode = document
 			.querySelector('.heatmap-mode-buttons .active')
 			.getAttribute('data-mode');
 		if(view_mode === 'continuous') {
 			discreteDomains = 0;
 		}

 		heatmapArgs.discreteDomains = discreteDomains;
 		heatmapArgs.colors = colors;
 		new Chart("#chart-heatmap", heatmapArgs);

 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-heatmap').addEventListener('click', () => {
 	heatmapChart.export();
 });
--- a/docs/assets/js/index.min.js
+++ b/docs/assets/js/index.min.js
@@ -0,0 +1,563 @@
 (function () {
 'use strict';

 var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
 var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];

 // Universal constants
 var ANGLE_RATIO = Math.PI / 180;

 /**
 * Shuffles array in place. ES6 version
 * @param {Array} array An array containing the items.
 */
 function shuffle(array) {
 	// Awesomeness: https://bost.ocks.org/mike/shuffle/
 	// https://stackoverflow.com/a/2450976/6495043
 	// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1

 	for (var i = array.length - 1; i > 0; i--) {
 		var j = Math.floor(Math.random() * (i + 1));
 		var _ref = [array[j], array[i]];
 		array[i] = _ref[0];
 		array[j] = _ref[1];
 	}

 	return array;
 }

 // https://stackoverflow.com/a/29325222
 function getRandomBias(min, max, bias, influence) {
 	var range = max - min;
 	var biasValue = range * bias + min;
 	var rnd = Math.random() * range + min,
 	    // random in range
 	mix = Math.random() * influence; // random mixer
 	return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
 }

 // Playing around with dates
 var NO_OF_MILLIS = 1000;
 var SEC_IN_DAY = 86400;
 var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

 function clone(date) {
 	return new Date(date.getTime());
 }

 function timestampSec(date) {
 	return date.getTime() / NO_OF_MILLIS;
 }

 function timestampToMidnight(timestamp) {
 	var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

 	var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
 	if (roundAhead) {
 		return midnightTs + SEC_IN_DAY;
 	}
 	return midnightTs;
 }

 // mutates
 function addDays(date, numberOfDays) {
 	date.setDate(date.getDate() + numberOfDays);
 }

 // Composite Chart
 // ================================================================================
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];

 var lineCompositeData = {
 	labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],

 	yMarkers: [{
 		label: "Average 100 reports/month",
 		value: 1200,
 		options: { labelPos: "left" }
 	}],

 	datasets: [{
 		name: "Events",
 		values: reportCountList
 	}]
 };

 var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
 var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
 var fireballOver25 = [
 // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];

 var barCompositeData = {
 	labels: MONTH_NAMES_SHORT,
 	datasets: [{
 		name: "Over 25 reports",
 		values: fireballOver25[9]
 	}, {
 		name: "5 to 25 reports",
 		values: fireball_5_25[9]
 	}, {
 		name: "2 to 5 reports",
 		values: fireball_2_5[9]
 	}]
 };

 // Demo Chart multitype Chart
 // ================================================================================
 var typeData = {
 	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

 	yMarkers: [{
 		label: "Marker",
 		value: 43,
 		options: { labelPos: "left" }
 		// type: 'dashed'
 	}],

 	yRegions: [{
 		label: "Region",
 		start: -10,
 		end: 50,
 		options: { labelPos: "right" }
 	}],

 	datasets: [{
 		name: "Some Data",
 		values: [18, 40, 30, 35, 8, 52, 17, -4],
 		axisPosition: "right",
 		chartType: "bar"
 	}, {
 		name: "Another Set",
 		values: [30, 50, -10, 15, 18, 32, 27, 14],
 		axisPosition: "right",
 		chartType: "bar"
 	}, {
 		name: "Yet Another",
 		values: [15, 20, -3, -15, 58, 12, -17, 37],
 		chartType: "line"
 	}]
 };

 var trendsData = {
 	labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
 	datasets: [{
 		values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
 	}]
 };

 var moonData = {
 	names: ["Ganymede", "Callisto", "Io", "Europa"],
 	masses: [14819000, 10759000, 8931900, 4800000],
 	distances: [1070.412, 1882.709, 421.7, 671.034],
 	diameters: [5262.4, 4820.6, 3637.4, 3121.6]
 };

 var demoConfig = {
 	lineComposite: {
 		elementID: "#chart-composite-1",
 		options: {
 			title: "Fireball/Bolide Events - Yearly (reported)",
 			data: lineCompositeData,
 			type: "line",
 			height: 190,
 			colors: ["green"],
 			isNavigable: 1,
 			valuesOverPoints: 1,

 			lineOptions: {
 				dotSize: 8
 			}
 		}
 	},

 	barComposite: {
 		elementID: "#chart-composite-2",
 		options: {
 			data: barCompositeData,
 			type: "bar",
 			height: 210,
 			colors: ["violet", "light-blue", "#46a9f9"],
 			valuesOverPoints: 1,
 			axisOptions: {
 				xAxisMode: "tick",
 				shortenYAxisNumbers: true
 			},
 			barOptions: {
 				stacked: 1
 			}
 		}
 	},

 	demoMain: {
 		elementID: "",
 		options: {
 			title: "My Awesome Chart",
 			data: "typeData",
 			type: "axis-mixed",
 			height: 300,
 			colors: ["purple", "magenta", "light-blue"],
 			maxSlices: 10,

 			tooltipOptions: {
 				formatTooltipX: function formatTooltipX(d) {
 					return (d + '').toUpperCase();
 				},
 				formatTooltipY: function formatTooltipY(d) {
 					return d + ' pts';
 				}
 			}
 		}
 	}
 };

 // import { lineComposite, barComposite } from './demoConfig';
 // ================================================================================

 var Chart = xhiveframework.Chart; // eslint-disable-line no-undef

 var lc = demoConfig.lineComposite;
 var lineCompositeChart = new Chart(lc.elementID, lc.options);

 var bc = demoConfig.barComposite;
 var barCompositeChart = new Chart(bc.elementID, bc.options);

 lineCompositeChart.parent.addEventListener('data-select', function (e) {
 	var i = e.index;
 	barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
 });

 // ================================================================================

 var customColors = ['purple', 'magenta', 'light-blue'];
 var typeChartArgs = {
 	title: "My Awesome Chart",
 	data: typeData,
 	type: 'axis-mixed',
 	height: 300,
 	colors: customColors,

 	// maxLegendPoints: 6,
 	maxSlices: 10,

 	tooltipOptions: {
 		formatTooltipX: function formatTooltipX(d) {
 			return (d + '').toUpperCase();
 		},
 		formatTooltipY: function formatTooltipY(d) {
 			return d + ' pts';
 		}
 	}
 };

 var aggrChart = new Chart("#chart-aggr", typeChartArgs);

 Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
 	el.addEventListener('click', function (e) {
 		var btn = e.target;
 		var type = btn.getAttribute('data-type');
 		typeChartArgs.type = type;
 		if (type !== 'axis-mixed') {
 			typeChartArgs.colors = undefined;
 		} else {
 			typeChartArgs.colors = customColors;
 		}

 		if (type !== 'percentage') {
 			typeChartArgs.height = 300;
 		} else {
 			typeChartArgs.height = undefined;
 		}

 		var newChart = new Chart("#chart-aggr", typeChartArgs);
 		if (newChart) {
 			aggrChart = newChart;
 		}
 		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-aggr').addEventListener('click', function () {
 	aggrChart.export();
 });

 // Update values chart
 // ================================================================================
 var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];

 var getRandom = function getRandom() {
 	return Math.floor(getRandomBias(-40, 60, 0.8, 1));
 };
 var updateDataAllValues = Array.from({ length: 30 }, getRandom);

 // We're gonna be shuffling this
 var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
 	return i;
 });

 var getUpdateData = function getUpdateData(source_array) {
 	var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;

 	var indices = updateDataAllIndices.slice(0, length);
 	return indices.map(function (index) {
 		return source_array[index];
 	});
 };

 var updateData = {
 	labels: getUpdateData(updateDataAllLabels),
 	datasets: [{
 		"values": getUpdateData(updateDataAllValues)
 	}],
 	yMarkers: [{
 		label: "Altitude",
 		value: 25,
 		type: 'dashed'
 	}],
 	yRegions: [{
 		label: "Range",
 		start: 10,
 		end: 45
 	}]
 };

 var updateChart = new Chart("#chart-update", {
 	data: updateData,
 	type: 'line',
 	height: 300,
 	colors: ['#ff6c03'],
 	lineOptions: {
 		// hideLine: 1,
 		regionFill: 1
 	}
 });

 var chartUpdateButtons = document.querySelector('.chart-update-buttons');

 chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () {
 	shuffle(updateDataAllIndices);
 	var value = getRandom();
 	var start = getRandom();
 	var end = getRandom();
 	var data = {
 		labels: updateDataAllLabels.slice(0, 10),
 		datasets: [{ values: getUpdateData(updateDataAllValues) }],
 		yMarkers: [{
 			label: "Altitude",
 			value: value,
 			type: 'dashed'
 		}],
 		yRegions: [{
 			label: "Range",
 			start: start,
 			end: end
 		}]
 	};
 	updateChart.update(data);
 });

 chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
 	var index = updateChart.state.datasetLength; // last index to add
 	if (index >= updateDataAllIndices.length) return;
 	updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
 });

 chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
 	updateChart.removeDataPoint();
 });

 document.querySelector('.export-update').addEventListener('click', function () {
 	updateChart.export();
 });

 // Trends Chart
 // ================================================================================

 var plotChartArgs = {
 	title: "Mean Total Sunspot Count - Yearly",
 	data: trendsData,
 	type: 'line',
 	height: 300,
 	colors: ['#238e38'],
 	lineOptions: {
 		hideDots: 1,
 		heatline: 1
 	},
 	axisOptions: {
 		xAxisMode: 'tick',
 		yAxisMode: 'span',
 		xIsSeries: 1
 	}
 };

 var trendsChart = new Chart("#chart-trends", plotChartArgs);

 Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) {
 	el.addEventListener('click', function (e) {
 		var btn = e.target;
 		var type = btn.getAttribute('data-type');
 		var config = {};
 		config[type] = 1;

 		if (['regionFill', 'heatline'].includes(type)) {
 			config.hideDots = 1;
 		}

 		// plotChartArgs.init = false;
 		plotChartArgs.lineOptions = config;

 		new Chart("#chart-trends", plotChartArgs);

 		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-trends').addEventListener('click', function () {
 	trendsChart.export();
 });

 // Event chart
 // ================================================================================


 var eventsData = {
 	labels: ["Ganymede", "Callisto", "Io", "Europa"],
 	datasets: [{
 		"values": moonData.distances,
 		"formatted": moonData.distances.map(function (d) {
 			return d * 1000 + " km";
 		})
 	}]
 };

 var eventsChart = new Chart("#chart-events", {
 	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
 	data: eventsData,
 	type: 'bar',
 	height: 330,
 	colors: ['grey'],
 	isNavigable: 1
 });

 var dataDiv = document.querySelector('.chart-events-data');

 eventsChart.parent.addEventListener('data-select', function (e) {
 	var name = moonData.names[e.index];
 	dataDiv.querySelector('.moon-name').innerHTML = name;
 	dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
 	dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
 	dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
 	dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
 });

 // Heatmap
 // ================================================================================

 var today = new Date();
 var start = clone(today);
 addDays(start, 4);
 var end = clone(start);
 start.setFullYear(start.getFullYear() - 2);
 end.setFullYear(end.getFullYear() - 1);

 var dataPoints = {};

 var startTs = timestampSec(start);
 var endTs = timestampSec(end);

 startTs = timestampToMidnight(startTs);
 endTs = timestampToMidnight(endTs, true);

 while (startTs < endTs) {
 	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
 	startTs += SEC_IN_DAY;
 }

 var heatmapData = {
 	dataPoints: dataPoints,
 	start: start,
 	end: end
 };

 var heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,
 	type: 'heatmap',
 	discreteDomains: 1,
 	countLabel: 'Level',
 	colors: HEATMAP_COLORS_BLUE,
 	legendScale: [0, 1, 2, 4, 5]
 };
 var heatmapChart = new Chart("#chart-heatmap", heatmapArgs);

 Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
 	el.addEventListener('click', function (e) {
 		var btn = e.target;
 		var mode = btn.getAttribute('data-mode');
 		var discreteDomains = 0;

 		if (mode === 'discrete') {
 			discreteDomains = 1;
 		}

 		var colors = [];
 		var colors_mode = document.querySelector('.heatmap-color-buttons .active').getAttribute('data-color');
 		if (colors_mode === 'halloween') {
 			colors = HEATMAP_COLORS_YELLOW;
 		} else if (colors_mode === 'blue') {
 			colors = HEATMAP_COLORS_BLUE;
 		}

 		heatmapArgs.discreteDomains = discreteDomains;
 		heatmapArgs.colors = colors;
 		new Chart("#chart-heatmap", heatmapArgs);

 		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) {
 	el.addEventListener('click', function (e) {
 		var btn = e.target;
 		var colors_mode = btn.getAttribute('data-color');
 		var colors = [];

 		if (colors_mode === 'halloween') {
 			colors = HEATMAP_COLORS_YELLOW;
 		} else if (colors_mode === 'blue') {
 			colors = HEATMAP_COLORS_BLUE;
 		}

 		var discreteDomains = 1;

 		var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
 		if (view_mode === 'continuous') {
 			discreteDomains = 0;
 		}

 		heatmapArgs.discreteDomains = discreteDomains;
 		heatmapArgs.colors = colors;
 		new Chart("#chart-heatmap", heatmapArgs);

 		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
 			el.classList.remove('active');
 		});
 		btn.classList.add('active');
 	});
 });

 document.querySelector('.export-heatmap').addEventListener('click', function () {
 	heatmapChart.export();
 });

 }());
 //# sourceMappingURL=index.min.js.map
--- a/docs/assets/js/index.min.js.map
+++ b/docs/assets/js/index.min.js.map
--- a/docs/assets/js/influxframework-charts.min.js
+++ b/docs/assets/js/influxframework-charts.min.js
--- a/docs/assets/js/influxframework-charts.min.js.map
+++ b/docs/assets/js/influxframework-charts.min.js.map
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,11 +1,11 @@
 ---
 redirect_to: "https://influxframework.com/charts"
 redirect_to: "https://xhiveframework.com/charts"
 ---
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>InfluxFramework Charts</title>
    <title>XhiveFramework Charts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
    <meta name="description" content="A simple, responsive, modern charts library for the web.">
@@ -18,15 +18,15 @@ redirect_to: "https://influxframework.com/charts"
    <script src="assets/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <link rel="shortcut icon" href="https://influxframework.github.io/influxframework/assets/img/favicon.png" type="image/x-icon">
    <link rel="icon" href="https://influxframework.github.io/influxframework/assets/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="https://xhiveframework.github.io/xhiveframework/assets/img/favicon.png" type="image/x-icon">
    <link rel="icon" href="https://xhiveframework.github.io/xhiveframework/assets/img/favicon.png" type="image/x-icon">

    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>

  <body>
    <header>
      <h1>InfluxFramework Charts</h1>
      <h1>XhiveFramework Charts</h1>
      <p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p>
      <div id="chart-composite-1" class="border"></div>
      <p class="demo-tip">Click or use arrow keys to navigate data points</p>
@@ -38,7 +38,7 @@ redirect_to: "https://influxframework.com/charts"
      <pre><code class="hljs html">  &lt!--HTML--&gt;
  &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
      <pre><code class="hljs javascript">  // Javascript
  let chart = new influxframework.Chart( "#chart", { // or DOM element
  let chart = new xhiveframework.Chart( "#chart", { // or DOM element
    data: {
      labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
@@ -162,7 +162,7 @@ redirect_to: "https://influxframework.com/charts"
      <div class="btn-group export-buttons mt-1 mx-auto" role="group">
        <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
      </div>
      <pre><code class="hljs javascript margin-top">  let heatmap = new influxframework.Chart("#heatmap", {
      <pre><code class="hljs javascript margin-top">  let heatmap = new xhiveframework.Chart("#heatmap", {
    type: 'heatmap',
    title: "Monthly Distribution",
    data: {
@@ -183,8 +183,8 @@ redirect_to: "https://influxframework.com/charts"
    <section>
      <h6>Demo</h6>
      <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
        data-user="pratu16x7" data-embed-version="2" data-pen-title="InfluxFramework Charts Demo" class="codepen">
          See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">InfluxFramework Charts Demo</a>
        data-user="pratu16x7" data-embed-version="2" data-pen-title="XhiveFramework Charts Demo" class="codepen">
          See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">XhiveFramework Charts Demo</a>
          by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
          <a href="https://codepen.io">CodePen</a>.
      </p>
@@ -269,36 +269,36 @@ redirect_to: "https://influxframework.com/charts"
    <section>
      <h6>Install</h6>
      <p>Install via npm</p>
      <pre><code class="hljs console">  npm install influxframework-charts</code></pre>
      <pre><code class="hljs console">  npm install xhiveframework-charts</code></pre>
      <p>And include it in your project</p>
      <pre><code class="hljs javascript">  import { Chart } from "influxframework-charts"</code></pre>
      <pre><code class="hljs javascript">  import { Chart } from "xhiveframework-charts"</code></pre>
      <p>(for ES6+ import the ESModule from the dist folder)</p>
      <pre><code class="hljs javascript">  import { Chart } from "influxframework-charts/dist/influxframework-charts.esm.js"</code></pre>
      <pre><code class="hljs javascript">  import { Chart } from "xhiveframework-charts/dist/xhiveframework-charts.esm.js"</code></pre>
      <p>... or include it directly in your HTML</p>
      <pre><code class="hljs html">  &lt;script src="https://unpkg.com/influxframework-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
      <pre><code class="hljs html">  &lt;script src="https://unpkg.com/xhiveframework-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
      <p>Use as:</p>
      <pre><code class="hljs javascript">  new Chart();          // ES6 module
                        // or
  new influxframework.Chart();   // Browser</code></pre>
  new xhiveframework.Chart();   // Browser</code></pre>
    </section>

    <section class="text-center">
      <!-- Closing -->
      <a href="https://github.com/influxframework/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
      <a href="https://github.com/xhiveframework/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
      <p style="margin-top: 3rem;margin-bottom: 1.5rem;">
        <!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
        <a href="https://github.com/influxframework/charts" target="_blank">View on GitHub</a>
        <a href="https://github.com/xhiveframework/charts" target="_blank">View on GitHub</a>
      </p>
      <p style="margin-top: 1rem;">
        <a class="github-button" href="https://github.com/influxframework/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star influxframework/charts on GitHub">Star</a>
        <a class="github-button" href="https://github.com/xhiveframework/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star xhiveframework/charts on GitHub">Star</a>
      </p>
      <p>License: MIT</p>
    </section>

    <footer class="built-with-influxframework text-center">
        <img style="padding: 5px; width: 40px; background: #fff" class="influxframework-bird" src="./assets/img/influxframework-bird.png">
    <footer class="built-with-xhiveframework text-center">
        <img style="padding: 5px; width: 40px; background: #fff" class="xhiveframework-bird" src="./assets/img/xhiveframework-bird.png">
        <p style="margin: 24px 0 0px 0; font-size: 15px">
          Project maintained by <a href="https://influxframework.com" target="_blank">InfluxFramework</a>.
          Project maintained by <a href="https://xhiveframework.com" target="_blank">XhiveFramework</a>.
         </p>
        <p style="margin: 24px 0 80px 0; font-size: 12px">
          Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
@@ -307,7 +307,7 @@ redirect_to: "https://influxframework.com/charts"
        </p>
    </footer>

    <a href="https://github.com/influxframework/charts" target="_blank" class="github-corner" aria-label="View source on Github">
    <a href="https://github.com/xhiveframework/charts" target="_blank" class="github-corner" aria-label="View source on Github">
      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
@@ -315,7 +315,7 @@ redirect_to: "https://influxframework.com/charts"
      </svg>
    </a>

    <script src="assets/js/influxframework-charts.min.js"></script>
    <script src="assets/js/xhiveframework-charts.min.js"></script>
    <script src="assets/js/index.min.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
  "name": "influxframework-charts",
  "name": "xhiveframework-charts",
  "version": "1.6.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "influxframework-charts",
      "name": "xhiveframework-charts",
      "version": "1.6.2",
      "license": "MIT",
      "devDependencies": {
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
  "name": "influxframework-charts",
  "name": "xhiveframework-charts",
  "version": "1.6.3",
  "description": "https://influxframework.github.io/charts",
  "main": "dist/influxframework-charts.min.cjs.js",
  "module": "dist/influxframework-charts.min.esm.js",
  "src": "dist/influxframework-charts.esm.js",
  "browser": "dist/influxframework-charts.min.umd.js",
  "description": "https://xhiveframework.github.io/charts",
  "main": "dist/xhiveframework-charts.min.cjs.js",
  "module": "dist/xhiveframework-charts.min.esm.js",
  "src": "dist/xhiveframework-charts.esm.js",
  "browser": "dist/xhiveframework-charts.min.umd.js",
  "directories": {
    "doc": "docs"
  },
@@ -21,7 +21,7 @@
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/influxframework/charts.git"
    "url": "git+https://github.com/xhiveframework/charts.git"
  },
  "keywords": [
    "js",
@@ -30,9 +30,9 @@
  "author": "Prateeksha Singh",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/influxframework/charts/issues"
    "url": "https://github.com/xhiveframework/charts/issues"
  },
  "homepage": "https://github.com/influxframework/charts#readme",
  "homepage": "https://github.com/xhiveframework/charts#readme",
  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.3",
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -43,7 +43,7 @@ export default [
 		sourcemap: true,
 		output: [
 			{
 				file: 'docs/assets/js/influxframework-charts.min.js',
 				file: 'docs/assets/js/xhiveframework-charts.min.js',
 				format: 'iife',
 			},
 			{
@@ -51,7 +51,7 @@ export default [
 				format: 'umd',
 			}
 		],
 		name: 'influxframework',
 		name: 'xhiveframework',
 		plugins: [
 			postcssPlugin({
 				preprocessor: (content, id) => new Promise((resolve, reject) => {
@@ -90,7 +90,7 @@ export default [
 				format: 'iife',
 			}
 		],
 		name: 'influxframework',
 		name: 'xhiveframework',
 		plugins: [
 			postcssPlugin({
 				preprocessor: (content, id) => new Promise((resolve, reject) => {
@@ -174,7 +174,7 @@ export default [
 					resolve({ code: result.css.toString() })
 				}),
 				extensions: ['.scss'],
 				extract: 'dist/influxframework-charts.min.css',
 				extract: 'dist/xhiveframework-charts.min.css',
 				plugins: [
 					nested(),
 					cssnext({ warnForDuplicates: false }),
--- a/src/js/charts/BaseChart.js
+++ b/src/js/charts/BaseChart.js
@@ -181,7 +181,7 @@ export default class BaseChart {

 		this.svg = makeSVGContainer(
 			this.container,
 			'influxframework-chart chart',
 			'xhiveframework-chart chart',
 			this.baseWidth,
 			this.baseHeight
 		);
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,10 +1,10 @@
 import * as Charts from './chart';

 let influxframework     = { };
 let xhiveframework     = { };

 influxframework.NAME    = 'InfluxFramework Charts';
 influxframework.VERSION = '1.6.2';
 xhiveframework.NAME    = 'XhiveFramework Charts';
 xhiveframework.VERSION = '1.6.2';

 influxframework         = Object.assign({ }, influxframework, Charts);
 xhiveframework         = Object.assign({ }, xhiveframework, Charts);

 export default influxframework;
 export default xhiveframework;