Add new tags for dashboard, chart, overview. about cannercms HOT 8 CLOSED

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

from cannercms.

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>
);

from cannercms.

@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>

from cannercms.

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

+1 for indicator

from cannercms.

@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?

from cannercms.

from cannercms.

@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!

from cannercms.

Merged, so I closed it.

from cannercms.