Viz Actions

Introduction

Viz action is a set of events working for a viz to do something that interacts with a dashboard container or to notify something. No matter what a viz to do with a dashboard container must be executed through an action. Viz action is similar to Redux Action but it is passed by React Context, not running in Redux framework in fact, since the Viz library is not an app, that should not have an own Redux store.

Usage

Passing context data to all vizs as long as using VizContext.Provider.

import { Viz, VizContext, ACTIONS } from 'a10-gui-dgp-viz'
const { MainChart } = Viz
const context = {
  isLoading: false,
  receive: action => {
    const { type, callback } = action
    switch (type) {
      case ACTIONS['VIZ.CHART.MAIN.SWITCH_TYPE']: {
        const newData = {...}
        callback(newData) // pass the new data
      }
    }
  },
}
<VizContext.Provider value={context}>
  <MainChart name="MY COLUMN" data={{...}} />
</VizContext.Provider>

Viz Context Interface & Default Value

export interface IVizContextData {
  isLoading?: boolean
  receive?(action: IVizAction): void
}
export const VIZ_CONTEXT_DATA: IVizContextData = {
  isLoading: false,
  receive: _.noop,
}

Full Example

import React from 'react'
import { A10Component } from 'a10-gui-framework'
import { Viz, VizContext, ACTIONS } from 'a10-gui-dgp-viz'

const { MainChart } = Viz

export interface IDashboardTestProps {}
export class DashboardTest extends A10Component<IDashboardTestProps> {
  state = {
    isLoading: true,
  }
  constructor(props: IDashboardTestProps) {
    super(props)
    this.context = {
      isLoading: this.state.isLoading,
      receive: action => {
        const { type, callback } = action
        switch (type) {
          case ACTIONS['VIZ.CHART.MAIN.SWITCH_TYPE']: {
            const newData = {...}
            callback(newData)
          }
        }
      },
    }
  }
  render() {
    return (
      <VizContext.Provider value={this.context}>
        <MainChart name="MY COLUMN" data={{...}} />
      </VizContext.Provider>
    )
  }
}

ACTIONS List

Please refer to the section ACTIONS inside all viz pages from the group VIZ.

[DEV] How to define an action

Action definition file is src/actions.ts in the Viz library.

For the development, we create action creators in the ACTION_CREATORS. An action type maps to an action creator function, we use action creator function to build an action to dispatch.

NOTE: The Viz framework code will turn all action creators into ACTIONS object automatically which is used by dashboard container.

export const ACTION_CREATORS = passKeyAsType({
  'VIZ.CHART.MAIN.SWITCH_TYPE'(chartType: string) {
    return {
      type: this.type,
      chartType,
    }
  },
})

[DEV] How to dispatch an action

For the development, just import ACTION_CREATORS from src/actions .

We dispatch an action via executing an action creator.

import {
  ACTION_CREATORS,
} from '../../actions' // src/actions

onClickMenu = (options: { type: string; groups: string[] }) => {
  const { dispatch } = this.props
  const { type: chartType } = options
  dispatch(ACTION_CREATORS['VIZ.CHART.MAIN.SWITCH_TYPE'](chartType))
}