init line package #29

packages/core/package.json

@@ -2,7 +2,6 @@
     "name": "@devinit-charts/core",
     "version": "1.0.0",
     "description": "Core package for devinit charts",
-    "main": "lib/index.js",
     "scripts": {
       "test": "jest",
       "test:dev": "jest -w",
@@ -19,10 +18,8 @@
       "plottable": "3.8.1"
     },
     "directories": {
-      "dist": "./dist",
       "lib": "./lib",
-      "src": "./src",
-      "test": "./test"
+      "src": "./src"
     },
     "repository": {
       "type": "git",

packages/core/src/axes/grid.ts

@@ -1,12 +1,13 @@
-import { Components } from 'plottable';
+import { Components, Scale } from 'plottable';
 import { configureGridTicking } from './ticking';
 
 export interface Config {
   orientation: string;
-  scale: any;
-  showGridlines: boolean;
-  ticking: string;
+  scale: Scale<any, any>;
+  showGridlines?: boolean;
+  ticking?: string;
 }
+
 export const createLinearAxisGridLines = (config: Config) => {
   const {
     orientation, scale, showGridlines = false, ticking = 'odd'

packages/core/src/axes/index.ts

@@ -1,4 +1,4 @@
-import { AxisOrientation, Axes, Components, Scales, Component, XAlignment } from 'plottable';
+import { AxisOrientation, Axes, Components, Scales, Component} from 'plottable';
 import {approximate} from '@devinit/prelude/lib/numbers';
 import {configureAxisTicking, configureTimeAxisTicking} from '../axes/ticking';
 
@@ -108,13 +108,13 @@ export const getAxisLabelRotation = alignment => {
  * @param {function} format
  * @returns {Plottable.Axes.Numeric}
  */
-export type NumericAxis = AxisConfig & {
+export type NumericConfigAxis = AxisConfig & {
   axisScale: Scales.Linear;
-  axisOrientation?: XAlignment;
+  axisOrientation?: string;
 };
 
 export const createNumericAxis =
-  (axisConfig: NumericAxis, format?: (any) => any, axis?: Axes.Numeric): Components.Table
+  (axisConfig: NumericConfigAxis, format?: (any) => any, axis?: Axes.Numeric): Components.Table
   | undefined => {
   const {
     showAxis = true,
@@ -167,11 +167,11 @@ export const createNumericAxis =
  * @param {Plottable.Axes.Time} axis
  * @returns {Plottable.Axes.Time}
  */
-export type TimeConfig = AxisConfig & {
+export type TimeAxisConfig = AxisConfig & {
   axisScale: Scales.Time;
 };
 
-export const createTimeAxis = (config: TimeConfig, axis?: any): Component | undefined => {
+export const createTimeAxis = (config: TimeAxisConfig, axis?: any): Component | undefined => {
   if (!config.showAxis) return undefined;
 
   if (!axis) axis = new Axes.Time(config.axisScale, 'bottom');
@@ -212,14 +212,15 @@ export const createTimeAxis = (config: TimeConfig, axis?: any): Component | unde
  * @param {Plottable.Axes.Category} axis
  * @returns {Plottable.Axes.Category}
  */
-export type CategoryConfig = AxisConfig & {
+export type CategoryAxisConfig = AxisConfig & {
   axisScale: Scales.Category;
   axisOrientation?: string;
   innerPadding?: number;
   outerPadding?: number;
   axisDirection?: AxisOrientation;
 };
-export const createCategoryAxis = (config: CategoryConfig, axis?: Axes.Category) => {
+
+export const createCategoryAxis = (config: CategoryAxisConfig, axis?: Axes.Category) => {
   if (!config.showAxis) return null;
 
   const alignment = config.axisDirection || (config.axisOrientation === 'vertical' ? 'bottom' : 'left');

packages/line/categoric/index.ts → packages/core/src/categoric/index.ts

@@ -2,27 +2,73 @@ import * as Plottable from 'plottable';
 import {approximate} from '@devinit/prelude/lib/numbers';
 import { createChartTable } from '../table';
 import { createTitle } from '../title';
-import { createColorLegend } from '../legend';
+import { createColorLegend, LegendConfig } from '../legend';
 import { makeUnique } from '../dataset';
-import { createCategoryScale, createLinearScale } from '../scale';
-import { createCategoryAxis, createNumericAxis } from '../axis';
-import { createLinearAxisGridLines } from '../grid';
+import { createCategoryScale, createLinearScale, LinearScale, CategoryScale } from '../scale';
+import { createCategoryAxis, CategoryAxisConfig, NumericConfigAxis, createNumericAxis } from '../axes';
+import { createLinearAxisGridLines } from '../axes/grid';
 import createScaleAnimator from '../animator/scale';
+import { Labeling } from '../types';
+import { XAlignment } from 'plottable';
 
-export const createLinearPlot = ({
-  plot,
-  orientation,
-  categoryScale,
-  linearScale,
-  labeling,
-}) => {
-  const { showLabels = false, prefix = '', suffix = ''} = labeling as any;
-
-  if (plot.labelsEnabled && !labeling.custom) {
-    plot.labelFormatter(d => `${prefix}${approximate(d)}${suffix}`).labelsEnabled(showLabels);
+export interface CategoricChart {
+  linearScale: Plottable.Scales.Linear;
+  categoryScale: Plottable.Scales.Category;
+  colorScale: Plottable.Scales.Color;
+  table: Plottable.Components.Table;
+  update: (data: any) => void;
+  destroy: () => void;
+}
+
+export interface CategoricConfig {
+  title?: string;
+  titleAlignment?: Plottable.XAlignment;
+  orientation: string;
+  groupBy: string;
+  colors: string[];
+  coloring?: string;
+  labeling: Labeling;
+  linearScaleOpts?: LinearScale;
+  linearAxisOpts: NumericConfigAxis & {indicator: string};
+  categoryAxisOpts: CategoryAxisConfig & {indicator: string};
+  categoryScaleOpts?: CategoryScale;
+  legend: LegendConfig & {position: XAlignment};
+}
+
+export type BarPlot = Plottable.Plots.Bar<any, any>;
+export type LinePlot =  Plottable.Plots.Line<any>;
+
+export interface CreateCategoricChartArgs {
+  element: string | HTMLElement;
+  plot: BarPlot | LinePlot;
+  config: CategoricConfig;
+}
+
+export interface LinearPlotArgs {
+  plot: BarPlot | LinePlot;
+  orientation: string;
+  categoryScale: Plottable.Scales.Category;
+  linearScale: Plottable.Scales.Linear;
+  labeling: Labeling;
+}
+
+export const createLinearPlot = (args: LinearPlotArgs) => {
+  const {
+    plot,
+    orientation,
+    categoryScale,
+    linearScale,
+    labeling,
+  } = args;
+
+  const {prefix, suffix, showLabels} = labeling;
+
+  if ((plot as BarPlot).labelsEnabled && showLabels && !labeling.custom) {
+    (plot as BarPlot)
+      .labelFormatter(d => `${prefix}${approximate(d)}${suffix}`).labelsEnabled(true);
   }
 
-  return plot
+  return (plot as Plottable.Plots.Bar<any, any>)
     .attr('stroke', d => d.color)
     .attr('fill', d => d.color)
     .attr('fill-opacity', d => d.opacity)
@@ -49,53 +95,10 @@ const createPlotAreaWithAxes = (orientation, { linearAxis, plotArea, categoryAxi
   return new Plottable.Components.Table(plotAreaWithAxes);
 };
 
-/**
- * @typedef {Object} LinearCategoryChart
- * @private
- * @property {string} type - Type
- * @property {string} title - Title
- * @property {'left'|'center'|'right'} titleAlignment=left - Title Alignment
- * @property {('vertical'|'horizontal')} orientation=vertical - Orientation
- * @property {indicator} groupBy - Groups
- * @property {Labeling} labeling - Labeling
- * @property {string[]} colors - Colors
- * @property {indicator} coloring - Color Indicator
- * @property {NumericAxis} linearAxis - Linear Axis
- * @property {CategoryAxis} categoryAxis - Category Axis
- * @property {Tooltip} tooltips - Tooltips
- * @property {ColorLegend} legend - Legend
- */
-
-export interface CategoricChart {
-  linearScale: Plottable.Scales.Linear;
-  categoryScale: Plottable.Scales.Category;
-  colorScale: Plottable.Scales.Color;
-  table: Plottable.Components.Table;
-  update: (data: any) => void;
-  destroy: () => void;
-}
-export interface Config {
-  title?: string;
-  titleAlignment: string;
-  orientation: string;
-  groupBy: string;
-  colors: string[];
-  coloring?: string;
-  Labeling: any;
-  linearAxis: any;
-  categoryAxis: any;
-  legend: any;
-}
-export interface CreateCategoricChartArgs {
-  element: string | HTMLElement;
-  plot: Plottable.Plot;
-  config: Config;
-}
-
-export type CreateCategoricChart = (CreateCategoricChartArgs)  => CategoricChart;
-export const createCategoricChart: CreateCategoricChart = ({ element, plot, config }) => {
+export const createCategoricChart = (args: CreateCategoricChartArgs): CategoricChart => {
+  const { element, plot, config } = args;
   const {
-    title = null,
+    title,
 
     titleAlignment = 'left',
 
@@ -109,19 +112,25 @@ export const createCategoricChart: CreateCategoricChart = ({ element, plot, conf
 
     labeling,
 
-    linearAxis,
+    linearScaleOpts = {},
+
+    categoryScaleOpts = {},
 
-    categoryAxis,
+    legend,
 
-    legend = {},
+    linearAxisOpts,
 
-    // ... more config
+    categoryAxisOpts,
   } = config;
 
-  const categoryScale = createCategoryScale(categoryAxis);
-  const linearScale = createLinearScale(linearAxis);
+  const categoryScale = createCategoryScale(categoryScaleOpts);
+  const linearScale = createLinearScale(linearScaleOpts);
   const colorScale = new Plottable.Scales.Color();
-
+  const linearAxis = createNumericAxis({
+    ...(linearAxisOpts as NumericConfigAxis),
+    axisScale: linearScale,
+    axisOrientation: orientation,
+  });
   const table = createChartTable({
     title: createTitle({ title, titleAlignment }),
 
@@ -134,17 +143,12 @@ export const createCategoricChart: CreateCategoricChart = ({ element, plot, conf
           linearScale,
           labeling,
         }),
-        grid: createLinearAxisGridLines({ ...linearAxis, orientation, scale: linearScale }),
-      }),
-
-      linearAxis: createNumericAxis({
-        ...linearAxis,
-        axisScale: linearScale,
-        axisOrientation: orientation,
+        grid: createLinearAxisGridLines({orientation, scale: linearScale}),
       }),
 
+      linearAxis,
       categoryAxis: createCategoryAxis({
-        ...categoryAxis,
+        ...(categoryAxisOpts as CategoryAxisConfig),
         axisScale: categoryScale,
         axisOrientation: orientation,
       }),
@@ -182,9 +186,9 @@ export const createCategoricChart: CreateCategoricChart = ({ element, plot, conf
         data.filter(d => d[groupBy] === groupId).map(item => {
           return {
             group: groupId,
-            label: item[categoryAxis.indicator],
-            value: item[linearAxis.indicator],
-            color: item[coloring] || colors[index] || '#abc',
+            label: item[categoryAxisOpts.indicator],
+            value: item[linearAxisOpts.indicator],
+            color: coloring && item[coloring] || colors[index] || 'grey',
             opacity: 1,
           };
         }));
@@ -195,7 +199,7 @@ export const createCategoricChart: CreateCategoricChart = ({ element, plot, conf
         }
         const axisMaximum = Math.max.apply(null, sums);
 
-        animate([linearScale], [linearAxis.axisMinimum || 0, axisMaximum]);
+        animate([linearScale], [linearScaleOpts.axisMinimum || 0, axisMaximum]);
       }
 
       plot.datasets(datasets.map(d => new Plottable.Dataset(d)));

packages/core/src/categoric/readme.md

@@ -0,0 +1 @@
+for creating categoric bar & line charts

packages/core/src/legend/index.ts

@@ -23,13 +23,13 @@ import {Components, Scales, XAlignment, SymbolFactories} from 'plottable';
  * @param {ColorLegend} config
  * @returns {*}
  */
-export interface Config {
-  showLegend: boolean;
+export interface LegendConfig {
+  showLegend?: boolean;
   symbol?: string;
   alignment?: XAlignment;
   rowSpan?: any;
 }
-export const createColorLegend = (colorScale: Scales.Color, config: Config) => {
+export const createColorLegend = (colorScale: Scales.Color, config: LegendConfig) => {
   const {
     showLegend = false, symbol = 'square', alignment = 'left', rowSpan = Infinity
   } = config;

packages/core/src/scale/index.ts

@@ -5,15 +5,16 @@ import { Scales } from 'plottable';
  * @param {NumericAxis} config
  * @returns {Linear}
  */
-export const createLinearScale = (config: any) => {
-  const { axisMinimum = null, axisMaximum = null } = config;
+export interface LinearScale {
+  axisMaximum?: number;
+  axisMinimum?: number;
+}
+export const createLinearScale = (config: LinearScale): Scales.Linear => {
+  const { axisMinimum, axisMaximum} = config;
 
   const scale = new Scales.Linear();
-  scale.domainMin(axisMinimum);
-  scale.domainMax(axisMaximum);
-
-  // ...
-
+  if (axisMinimum) scale.domainMin(axisMinimum);
+  if (axisMaximum) scale.domainMax(axisMaximum);
   return scale;
 };
 
@@ -23,13 +24,14 @@ export const createLinearScale = (config: any) => {
  * @returns {Time}
  */
 export interface TimeScale {
-  axisMaximum?: any;
-  axisMinimum?: any;
+  axisMaximum?: string | Date;
+  axisMinimum?: string | Date;
 }
-export const createTimeScale = (config: TimeScale) => {
+export const createTimeScale = (config: TimeScale): Scales.Time => {
   const scale = new Scales.Time();
-  if (config.axisMaximum) scale.domainMin(new Date(config.axisMinimum.toString()));
-  if (config.axisMaximum) scale.domainMax(new Date(config.axisMaximum.toString()));
+  const { axisMinimum, axisMaximum} = config;
+  if (axisMinimum) scale.domainMin(new Date(axisMinimum.toString()));
+  if (axisMaximum) scale.domainMax(new Date(axisMaximum.toString()));
 
   return scale;
 };
@@ -39,11 +41,12 @@ export const createTimeScale = (config: TimeScale) => {
  * @param {CategoryAxis} config
  * @returns {Category}
  */
-export interface Config {
+export interface CategoryScale {
   innerPadding?: number;
   outerPadding?: number;
 }
-export const createCategoryScale = (config: Config) => {
+
+export const createCategoryScale = (config: CategoryScale): Scales.Category => {
   const { innerPadding = 0, outerPadding = 0 } = config;
   const scale = new Scales.Category();
   scale.outerPadding(outerPadding);