Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Fix Flux CSV README examples #761

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: Fix Flux CSV README examples #761

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 47 additions & 46 deletions giraffe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,22 +162,27 @@ In this quickstart, we're going to build a simple line graph using Giraffe in a

```


#### Examples Using Flux [](#example-using-flux)

##### 1. Generating the table through a Flux result
##### Plot a Flux table generated from Flux CSV

When generating the table through a Flux result:
To generate the Flux table from Flux CSV, do the following:

- call the `fromFlux` utility function on the CSV generated by Flux
- get the table in the returned object from calling `fromFlux`
1. Pass the CSV from the Flux response to the `fromFlux` utility function.
2. Get the `.table` property from the object returned by `fromFlux`.

Here is an example of turning a result in comma separate values (CSV) from Flux into a table and rendering it without optional properties:
The following example shows how to transform a Flux annotated CSV response into a Flux table and render the data as a line plot:

<pre>
import {Plot, fromFlux} from '@influxdata/giraffe'
```ts
import { fromFlux, Plot, LayerTypes, Config, LayerConfig } from '@influxdata/giraffe'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's alphabetize these imports, and remove the spaces between the brackets, since that is our coding standard.

import {fromFlux, Config, LayerConfig, LayerTypes, Plot}


export default function DevicePlot() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor nitpick, but I don't think we should encourage export default in docs for some of the reasons outlined here: https://basarat.gitbook.io/typescript/main-1/defaultisbad.

It would look like this when removing the export default:

export const DevicePlot = () => {


// ...
const style = {
width: "calc(70vw - 20px)",
height: "calc(70vh - 20px)",
margin: "40px",
}

const fluxResultCSV = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
#group,false,false,true,true,false,false,true,true,true,true
Expand All @@ -194,40 +199,40 @@ Here is an example of turning a result in comma separate values (CSV) from Flux

const dataFromFlux = fromFlux(fluxResultCSV)

const lineLayer = {
type: "line",
const lineLayer: LayerConfig = {
type: LayerTypes.Line,
x: "_time",
y: "_value",
}

const config = {
const config: Config = {
table: dataFromFlux.table,
layers: [lineLayer],
}

// ...
return(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return(
return (

<div style={style}>
<Plot config={config} />
</div>
)

// return this element in your React rendering code:
}
```

&#60;div
style={{
width: "calc(70vw - 20px)",
height: "calc(70vh - 20px)",
margin: "40px",
}}
&#62;
&#60;Plot config={config} /&#62;
&#60;/div&#62;
</pre>
##### Plot Flux CSV from a Flux query response

##### 2. Using CSV from a Flux query
To render a plot from Flux CSV, pass the CSV as the `fluxResponse` config--for example:

When using the comma separated values (CSV) from the Flux query as the `fluxResponse` property:
```ts
import { Plot, LayerTypes, Config, LayerConfig } from '@influxdata/giraffe'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here about alphabetizing and removing the spaces around the braces

import {Config, LayerConfig, LayerTypes, Plot}

Copy link
Contributor

@TCL735 TCL735 Jun 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid TypeScript in the examples. I find TypeScript to be an advanced tool. Our examples should be approachable. Someone who wants to use just React does not need to import LayerTypes.


<pre>
import {Plot} from '@influxdata/giraffe'
export default function DevicePlot() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same bit here about export default

export const DevicePlot = () => {


// ...
const style = {
width: "calc(70vw - 20px)",
height: "calc(70vh - 20px)",
margin: "40px",
}

const fluxResponse = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
#group,false,false,true,true,false,false,true,true,true,true
Expand All @@ -242,35 +247,31 @@ When using the comma separated values (CSV) from the Flux query as the `fluxResp
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-10T22:20:40.776Z,28.7,value,temperature,index.html,browser
`

const lineLayer = {
type: "line",
const lineLayer: LayerConfig = {
type: LayerTypes.Line,
Copy link
Contributor

@TCL735 TCL735 Jun 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid TypeScript in the examples. I find TypeScript to be an advanced tool. Our examples should be approachable. Someone who wants to use just React needs only the string "line"

x: "_time",
y: "_value",
fill: []
}

const config = {
const config: Config = {
Copy link
Contributor

@TCL735 TCL735 Jun 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid TypeScript in the examples. I find TypeScript to be an advanced tool. Our examples should be approachable. No need to confuse someone who just wants (and knows only how) to use React.

fluxResponse,
layers: [lineLayer],
}

// ...
return(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

our standards have a space between return and ( or {

Suggested change
return(
return (

<div style={style}>
<Plot config={config} />
</div>
)

// return this element in your React rendering code:

&#60;div
style={{
width: "calc(70vw - 20px)",
height: "calc(70vh - 20px)",
margin: "40px",
}}
&#62;
&#60;Plot config={config} /&#62;
&#60;/div&#62;
</pre>
}
```

## Config

`<Plot>` requires a `config` prop which is an object with properties that serve three purposes:
`<Plot>` requires a `config` prop.
`config` is an object with properties that control the following:

- [appearance](#appearance-properties) customization for sizing and framing
- [data](#data-properties) store, getters and setters, and plot-type specific options
Expand Down