@xenknight/framework7 0.0.2

package/components/area-chart/area-chart.d.ts

@@ -0,0 +1,128 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace AreaChart {
+  interface AreaChart extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Area chart HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with chart HTML element */
+    $el: Dom7Array;
+    /** Area chart generated SVH HTML element */
+    svgEl: HTMLElement;
+    /** Dom7 instance with generated SVH HTML element */
+    $svgEl: Dom7Array;
+    /** Area chart parameters */
+    params: Parameters;
+
+    /** Update/rerender chart SVG element according to passed parameters. It accepts object with same parameters required for chart initialization. You can pass only parameters that needs to be updated */
+    update(parameters: Parameters): AreaChart;
+    /** Destroys chart instance */
+    destroy(): void;
+  }
+
+  interface Dataset {
+    /** Dataset value */
+    values: number[];
+    /** Dataset HEX color */
+    color?: string;
+    /** Dataset label */
+    label?: any;
+  }
+
+  interface Parameters {
+    /** Area chart element. HTMLElement or string with CSS selector of chart element. Generated SVG will be inserted into this element. */
+    el: HTMLElement | CSSSelector;
+    /** Enables lines chart (instead of area chart) */
+    lineChart: boolean;
+    /** Chart data sets */
+    datasets: Dataset[];
+    /** Enables chart horizontal (X) axis */
+    axis: boolean;
+    /** Chart horizontal (X) axis labels. Should have same amount of items as dataset values */
+    axisLabels: any[];
+    /** Enables tooltip on hover */
+    tooltip: boolean;
+    /** Enables chart legend */
+    legend: boolean;
+    /** When enabled it will toggle data sets on legend items click */
+    toggleDatasets: boolean;
+    /** Generated SVG image width (in px). (default 640) */
+    width: number;
+    /** Generated SVG image height (in px). (default 320) */
+    height: number;
+    /** Max numbers of axis labels (ticks) to be visible on axis. (default 8) */
+    maxAxisLabels: number;
+    /** Custom render function to format axis label text */
+    formatAxisLabel: (this: AreaChart, label: any) => string;
+    /** Custom render function to format legend label text */
+    formatLegendLabel: (this: AreaChart, label: any) => string;
+    /** Custom render function that must return tooltip's HTML content */
+    formatTooltip?: (
+      this: AreaChart,
+      data: {
+        index: number;
+        total: number;
+        datasets: {
+          color?: string;
+          label: any;
+          value: number;
+        }[];
+      },
+    ) => string;
+    /** Custom render function to format axis label text in Tooltip */
+    formatTooltipAxisLabel: (this: AreaChart, label: any) => string;
+    /** Custom render function to format total value text in Tooltip */
+    formatTooltipTotal: (this: AreaChart, total: number) => string;
+    /** Custom render function to format dataset text in Tooltip */
+    formatTooltipDataset: (this: AreaChart, label: string, value: number, color: string) => string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    select: (areaChart: AreaChart, index: number | null) => void;
+    /** Event will be triggered right before Area chart instance will be destroyed. As an argument event handler receives Area chart instance */
+    beforeDestroy: (areaChart: AreaChart) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    'areachart:select': () => void;
+    /** Event will be triggered right before Area chart instance will be destroyed */
+    'areachart:beforedestroy': () => void;
+  }
+  interface AppMethods {
+    areaChart: {
+      /** create Area chart instance */
+      create(parameters: Parameters): AreaChart;
+      /** destroy Area chart instance */
+      destroy(el: HTMLElement | CSSSelector | AreaChart): void;
+      /** get Area chart instance by HTML element */
+      get(el: HTMLElement | CSSSelector): AreaChart;
+      /** update/rerender Area chart SVG according to passed parameters */
+      update(parameters: Parameters): AreaChart;
+    };
+  }
+  interface AppParams {
+    areaChart?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    areaChartSelect: (areaChart: AreaChart, index: number | null) => void;
+    /** Event will be triggered right before AreaChart instance will be destroyed. As an argument event handler receives Area chart instance */
+    areaChartBeforeDestroy: (areaChart: AreaChart) => void;
+  }
+}
+
+declare const AreaChartComponent: Framework7Plugin;
+
+export default AreaChartComponent;

package/components/area-chart/area-chart.js

@@ -0,0 +1,44 @@
+import $ from '../../shared/dom7.js';
+import AreaChart from './area-chart-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'areaChart',
+  params: {
+    areaChart: {
+      el: null,
+      lineChart: false,
+      datasets: [],
+      axis: false,
+      axisLabels: [],
+      tooltip: false,
+      legend: false,
+      toggleDatasets: false,
+      width: 640,
+      height: 320,
+      maxAxisLabels: 8,
+      formatAxisLabel: null,
+      formatLegendLabel: null,
+      formatTooltip: null,
+      formatTooltipAxisLabel: null,
+      formatTooltipTotal: null,
+      formatTooltipDataset: null
+    }
+  },
+  create() {
+    const app = this;
+    app.areaChart = ConstructorMethods({
+      defaultSelector: '.area-chart',
+      constructor: AreaChart,
+      app,
+      domProp: 'f7AreaChart'
+    });
+    app.areaChart.update = function update(el, newParams) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const areaChart = app.areaChart.get(el);
+      if (!areaChart) return undefined;
+      areaChart.update(newParams);
+      return areaChart;
+    };
+  }
+};

package/components/area-chart/area-chart.less

@@ -0,0 +1,131 @@
+@import './area-chart-vars.less';
+.area-chart {
+  position: relative;
+  svg {
+    display: block;
+    width: 100%;
+    font-size: 0;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  path {
+    fill: none;
+    stroke-width: var(--f7-area-chart-line-stroke-width);
+  }
+  &-current-line {
+    stroke: var(--f7-area-chart-current-line-stroke);
+    stroke-width: var(--f7-area-chart-current-line-stroke-width);
+  }
+  &-axis {
+    height: var(--f7-area-chart-axis-height);
+    background: var(--f7-area-chart-axis-bg-color);
+    color: var(--f7-area-chart-axis-text-color);
+    display: flex;
+    font-size: var(--f7-area-chart-axis-font-size);
+    font-weight: var(--f7-area-chart-axis-font-weight);
+    justify-content: space-between;
+    line-height: 1;
+    margin-bottom: 2em;
+    > span {
+      padding-top: 10px;
+      width: 0;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      white-space: nowrap;
+      &:first-child {
+        justify-content: flex-start;
+      }
+      &:last-child {
+        justify-content: flex-end;
+      }
+    }
+  }
+  &-tooltip {
+    pointer-events: none;
+    text-align: left;
+    font-size: var(--f7-area-chart-tooltip-font-size);
+    line-height: 1.4;
+
+    &-label {
+      color: var(--f7-area-chart-tooltip-total-label-text-color);
+    }
+    &-total {
+      font-size: var(--f7-area-chart-tooltip-total-font-size);
+      font-weight: var(--f7-area-chart-tooltip-total-font-weight);
+    }
+    &-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        white-space: nowrap;
+      }
+      span {
+        display: inline-block;
+        width: var(--f7-area-chart-tooltip-color-size);
+        height: var(--f7-area-chart-tooltip-color-size);
+        border-radius: 50%;
+        margin-right: 4px;
+      }
+    }
+  }
+  &-axis ~ &-legend {
+    margin-top: 2em;
+  }
+  &-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--f7-area-chart-legend-font-size);
+    width: 100%;
+    margin-top: 1em;
+    &-button {
+      -webkit-appearance: none !important;
+      appearance: none !important;
+      background-color: transparent;
+      border-radius: 0;
+      border: none;
+      outline: 0 !important;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: inherit;
+      box-shadow: none !important;
+    }
+    &-item {
+      position: relative;
+      color: var(--f7-area-chart-legend-text-color);
+      width: auto;
+      display: flex;
+      align-items: center;
+      font-weight: var(--f7-area-chart-legend-font-weight);
+      transition-duration: 200ms;
+      padding: var(--f7-area-chart-legend-padding);
+      border-radius: var(--f7-area-chart-legend-border-radius);
+      overflow: hidden;
+      span {
+        width: var(--f7-area-chart-legend-color-size);
+        height: var(--f7-area-chart-legend-color-size);
+        margin-right: 4px;
+        border-radius: 50%;
+        transition-duration: 200ms;
+      }
+
+      &-hidden {
+        color: var(--f7-area-chart-legend-disabled-text-color);
+        span {
+          background-color: var(--f7-area-chart-legend-disabled-text-color) !important;
+        }
+      }
+    }
+  }
+}
+
+.if-ios-theme({
+  @import './area-chart-ios.less';
+});
+.if-md-theme({
+  @import './area-chart-md.less';
+});