Add new tags for dashboard, chart, overview.

[abz53378]

Overview

We will support few tags for overview, chart, dashboard features:

• <page>
• <chart> tags
  • <chart ui="line">
  • <chart ui="pie">
  • <chart ui="scatter">
  • <chart ui="bar">
• <display> tags
  • <display ui="list">, see antd list.
  • <display ui="amount">, show the number, like react-admin demo.
• layout tags
  • <Row>
  • <Col>

Usage

export default (
  <root>
    <page keyName="overview"> {/* keyName of page will be used as the route */}
      <Row>
        <Col>
          <display ui="amount" graphql={``} />
        </Col>
        <Col>
          <display ui="list" graphql={``} />
        </Col>
      </Row>
      <Col><chart ui="bar" uiParams={vegaConfig} graphql={``}/></Col>
    </page>
  </root>
);

Implementation

For now, canner-script actually generate an object contains several required information for canner:
source

{
  schema: CannerSchema,
  visitors: Array<Object>,
  connectors: {[string]: any},
  resolvers: {[string]: any},
  graphqlClient: any,
  storages: {[key: string]: any}
};

To implement these tags, we can just add a pageSchema key in the object, and its value is a JSON object, same as CannerSchema.

{
    pageSchema: PageSchema
    schema: CannerSchema,
    visitors: Array<Object>,
    connectors: {[string]: any},
    resolvers: {[string]: any},
    graphqlClient: any,
    storages: {[key: string]: any}
};

The example of pageSchema:

pageSchema: {
    keyName: 'overview',
    type: 'page',
    items: {
        KEY2: {
            type: 'display',
            ui: 'amount',
            keyName: 'KEY2'
        },
        KEY3: {
            type: 'display',
            ui: 'amount',
            keyName: 'KEY3'
        },
        KEY4: {
            type: 'chart',
            ui: 'bar',
            keyName: 'KEY4'
        }
    }
}

Notes

• The keyName of <page /> is required because canner will take it as the route of this page.
• If there is no keyName passing to <display /> and <chart />, we should randomly generate one for it.

Discussion

1. Any better names of new tags?
2. Any different design of tags?

[chihsuan]

@abz53378: Thanks for writing down the spec. How about to use<metrics>, <indicator> or just <card> instead of <display> ? Because <display> might be more likely to consider as a verb which is not consistent with other tags.

And we might still need to have a new tag for picking the time range of data. Like Google Analytics. I think it would be like a container tag which can contain other UI tags but currently, I'm not sure how to control data flow. It might be like:

<datepicker options={} default="" showDelta={true}>
      <display ui="list" graphql={``} />
</datepicker>

[chilijung]

Agree with @chihsuan, tags should be more specific the better, cause we might adding additional tags in the future.

+1 for indicator

[abz53378]

Thanks, @chihsuan, <indicator> is a great name!

The <datePicker> is excatly an important tag, thx for point it out . But I still need some time to dig into it (maybe have other pickers?, or different tags design?, etc).

About the data flow of components, I will open another issue to discuss the implementation. But in brief, these components will fetch the data by themselves. For examples, this is a simple example of react-apollo, you can use <Query> component to fetch the data with the given graphql query (the graphql property in our case) and the variables(the date filter object in our case)

/**
const where = {
  date_gt: 2018-08-17T04:17:25Z
}
const grahpql = `
  query AggregateOrders($where: WhereInput!) {
    aggregateOrders(where: $where) {
      count
    }
  }
`
**/

// our <indicator> components
const Amount = ({ where,  graphql }) => (
  <Query query={gql`${graphql}`} variables={{ where }}>
    {({ loading, error, data }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;

      return (
        <div >
           {data.aggregateOrders.count}
        <div/>
      );
    }}
  </Query>
);

[chihsuan]

@abz53378: As we discussed, I'm trying to implement new chart tags. I am going to create a chart model in canner-script. Since we would need to wrap react-vega components as our components. Should we have a repo for chart components like antd-canner-components to map the chart tag to its component?

[chilijung]

Yes, you can create a repo for that. Could called ‘vega-canner-components’? Chi-Hsuan Huang <notifications@github.com>於 2018年8月18日 週六，下午1:28寫道：

@abz53378 <https://github.com/abz53378>: As we discussed, I'm trying to implement new chart tags. I am going to create a chart model in canner-script. Since we would need to wrapper react-vega components as our components. Should we have a repo for chart components like antd-canner-components to map the chart tag to its component? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#65 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABKOHWNKX4ZB8MxWk1aM1lKPp8GO5ZfEks5uR6XygaJpZM4V_yOW> .

-- Canner / Howard Chi https://www.canner.io Email: howard@canner.io

[chihsuan]

@chilijung: Thank you for the quick reply. Sure, vega-canner-components looks good. But could you please help to create it? I don't have the permission to do that. It's okay to take your time. I can implement new chart tags first since the repo name is determined. Thanks!

[wwwy3y3]

@chihsuan https://github.com/Canner/vega-canner-components
here you go.

[abz53378]

Merged, so I closed it.