Nonchalant Programming Master

    @axiomhq/axiom-elements
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-alpha.20 • Public • Published

    axiom-elements

    Axiom Elements is a set of React components that can display charts for your Axiom Datasets.

    https://www.axiom.co/

    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

    Install

    npm i @axiomhq/axiom-elements

    DownloadsWeekly Downloads

    8

    Version

    1.0.0-alpha.20

    License

    MIT

    Unpacked Size

    488 kB

    Total Files

    129

    Last publish

    Collaborators

    • seiflotfy
    • bahlo
    • mhr3
    • lukasmalkmus
    • cdeutsch
    • kevinehosford
    • axiomneil