1.0.0-alpha.20 • Published 2 years ago
@axiomhq/axiom-elements v1.0.0-alpha.20
axiom-elements
Axiom Elements is a set of React components that can display charts for your Axiom Datasets.
Using in your project
Install
npm install @axiomhq/axiom-elements
Generate an API Key
Visit your Axiom instance and go to Settings -> API Tokens
Add an API Token that has the "Query" permission for the Dataset you want to make charts for.
Configure AxiomProvider
MyLayout.tsx
import { AxiomProvider } from '@axiomhq/axiom-elements';
import React from 'react';
function App({ children }) {
return (
<div className="App">
<header className="App-header">
<AxiomProvider apiKey="YOUR-API-KEY" apiDomain="cloud.axiom.co">
{children}
</AxiomProvider>
</header>
</div>
);
}
export default App;
Adding Charts
MyCharts.tsx
import { Chart } from '@axiomhq/axiom-elements';
import React from 'react';
function MyCharts({ children }) {
return (
<div className="Charts">
<Chart
style={{ height: '90vh' }}
datasetId="hackernews"
name="Bitcoin Mentions"
type="TimeSeries"
query={
{
"aggregations": [
{
"argument": null,
"field": "*",
"op": "count"
}
],
"startTime": "datetime(2007-01-01T00:00:00.000Z)",
"endTime": "now()",
"groupBy": [
"has_bitcoin"
],
"virtualFields": [
{
"alias": "has_bitcoin",
"expr": "text contains \"bitcoin\" or title contains \"bitcoin\" or text contains_cs \" BTC \" or title contains_cs \" BTC \""
}
],
}
}
/>
</div>
);
}
export default MyCharts;
More Docs and Examples
Checkout this repository and run Storybook to explore the docs and example use cases.
See CONTRIBUTING.md for details on running Storybook
1.0.0-alpha.19
2 years ago
1.0.0-alpha.20
2 years ago
1.0.0-alpha.16
2 years ago
1.0.0-alpha.15
2 years ago
1.0.0-alpha.18
2 years ago
1.0.0-alpha.17
2 years ago
1.0.0-alpha.14
2 years ago
1.0.0-alpha.13
2 years ago
1.0.0-alpha.12
2 years ago
1.0.0-alpha.11
2 years ago
1.0.0-alpha.10
2 years ago
1.0.0-alpha.9
2 years ago
1.0.0-alpha.8
2 years ago
1.0.0-alpha.7
2 years ago
1.0.0-alpha.6
2 years ago
1.0.0-alpha.5
2 years ago
1.0.0-alpha.4
2 years ago
1.0.0-alpha.3
2 years ago
1.0.0-alpha.2
2 years ago
1.0.0-alpha.1
2 years ago
1.0.0-alpha.0
2 years ago