Layout Basics

Insight layouts are built using JSX components.
The minimum requirements is that the JSX opens with a <Insight> tag and closes with one. A title in <Insight> is optional, and will be shown in the upper left corner as a small title.

Insights are built using the following four components mainly:

<Title> — Header for a section:
<Title>30-Day Forecast</Title>
<Subtitle> — Sub-header that usually comes right below the <Title>:
<Title>30-Day Forecast</Title>
<Subtitle>What you can expect in the next 30-days</Subtitle>
<Txt> — Display a paragraph of text:
<Txt>Some paragraph here</Txt>
<Chart> — Displays a chart. More info later in the Chart api-library docs.
<Chart data={data.forecast} />

The next section shows examples of the most common layouts.

One column layout

A one column layout is simply made by adding content within the <Insight> component.

<Insight title="Forecast">
  <Title>30-Day Forecast</Title>
  <Subtitle>What you can expect in the next 30-days</Subtitle>
  
  <Txt>
    Below is the forecast of the time series you've selected, in this case, 30 days. The values on the right of the chart are the forecast. Forecasting a few days ahead is usually fairly accurate, but the further out you forecast, the less accurate the results will be. It is best to have more than 120 days of historical data to help the accuracy of the forecasts.
  </Txt>
  
  <Chart data={data.forecast} scrollToEnd title='Forecast' />

  <Title>Day-of-week effect</Title>
  <Subtitle>What days of the week has the biggest influence?</Subtitle>

  <Txt>
    The chart below shows which day of the week has more or less influence. For your data is looks like Wednesday has most positive influence (17.36% more), followed by Monday (11.15% more). Some days can have a negative influence, as indicated by a value lower than 0 in the chart below, while values above 0 indicate a positive effect. The higher the value, the bigger the effect of that day:
  </Txt>
  
  <Chart data={data.weekly_seasonality} title='Day-of-week effect' />  
</Insight>

Here is how this one column layout looks like:

Two column layout

A two column layout is made by adding a <TwoColumn> component, and directly under that add two <Column> children. Within each of the <Column> you can add content as usual, like in the example below:

<Insight title="Forecast">  
  <TwoColumns>
    <Column>
      <Title>30-Day Forecast</Title>
      <Subtitle>What you can expect in the next 30-days</Subtitle>

      <Txt>
        Below is the forecast of the time series you've selected, in this case, 30 days. The values on the right of the chart are the forecast. Forecasting a few days ahead is usually fairly accurate, but the further out you forecast, the less accurate the results will be. It is best to have more than 120 days of historical data to help the accuracy of the forecasts.
      </Txt>

      <Chart data={data.forecast} scrollToEnd title='Forecast' />
    </Column>
    <Column>
      <Title>Trend-line</Title>
      <Subtitle>A smooth trend with the fluctuations taken out.</Subtitle>

      <Txt>
        The trend-line chart below shows how your data looks like without fluctuations. This will give you an idea if the general trend is up or down for the future.
      </Txt>

      <Chart data={data.trend} scrollToEnd title='Trend-line' />
    </Column>
  </TwoColumns>

  <Title>Day-of-week effect</Title>
  <Subtitle>What days of the week has the biggest influence?</Subtitle>

  <Txt>The chart below shows which day of the week has more or less influence. For your data is looks like Wednesday has most positive influence (17.36% more), followed by Monday (11.15% more). Some days can have a negative influence, as indicated by a value lower than 0 in the chart below, while values above 0 indicate a positive effect. The higher the value, the bigger the effect of that day:</Txt>
  
  <Chart data={data.weekly_seasonality} title='Day-of-week effect' />
</Insight>

Here is how this two column layout looks like:

Mixed one and two column layouts

After the <TwoColumns> you can add still more content, so that your first section contains two columns and after that comes a one column section, like above.

Two columns and one column can be combined in multiple ways. You could for example add two <TwoColumns> components directly after each other, so that your page will have two sections, each having two columns. This would roughly be structured in JSX as:

<Insight>
  <TwoColumns>
    <Column>
      ...
    </Column>
    <Column>
      ...
    </Column>
  </TwoColumns>

  <TwoColumns>
    <Column>
      ...
    </Column>
    <Column>
      ...
    </Column>
  </TwoColumns>
</Insight>

This would look like:

Or two columns with a one column section after that, and then two columns again:

<Insight>
  <TwoColumns>
    <Column>
      ...
    </Column>
    <Column>
      ...
    </Column>
  </TwoColumns>
  
  <Title>...</Title>
  <Txt>
    ...
  </Txt>

  <TwoColumns>
    <Column>
      ...
    </Column>
    <Column>
      ...
    </Column>
  </TwoColumns>
</Insight>

This would look like:

Titles

Use <Title>This is heading 1</Title> to create heading for a new section in your Insight.

<Insight title='Insight Title'>
  <Title>Revenue for last 7 days</Title>
  <Txt>
    Lorem ipsum ...
  </Txt>

  <Title>Forecasted revenue for next week</Title>
  <Txt>
    Lorem ipsum ...
  </Txt>
</Insight>

This would look like:

Sub-titles

Use <Subtitle>This is a sub-header</Subtitle> to create sub-title, usually used below a <Title/>.

<Insight title='Insight Title'>
  <Title>Revenue for last 7 days</Title>
  <Subtitle>Excluding refunded payments</Subtitle>
  <Txt>
    Lorem ipsum ...
  </Txt>

  <Title>Forecasted revenue for next week</Title>
  <Subtitle>Excluding refunded payments</Subtitle>
  <Txt>
    Lorem ipsum ...
  </Txt>
</Insight>

This would look like:

Text

Use <Txt>This is a paragraph of text.</Txt> to create a paragraph of text, as shown using the lorem ipsum text in the examples above.

<Insight title='Insight Title'>
  <Title>Revenue for last 7 days</Title>
  <Subtitle>Excluding refunded payments</Subtitle>
              
  <Txt>
    The revenue for the last 7 days looks good.
  </Txt>
  <Txt>
    The forecasted revenue for next week looks even better.
  </Txt>
</Insight>

Tabs

Tabs can be used to either navigate the full content of the Insight, meaning that after the <Tabs> there are no other components, or only a part of the Insight in which case more components follow after <Tabs>.

Within each tab, you can add any number of <Tab> elements. Under each Tab you can add any component, including <TwoColumns>.

Tabs cannot be nested, but you can have multiple <Tabs> on the same page.

Each Tab needs a title, but subtitle is optional.

<Insight title='Revenue Forecast'>
  <Tabs>
    <Tab title='Revenue last 7 days' subtitle='In dollars'>
      <Txt>
        Lorem ipsum ...
      </Txt>
      
      <Chart data={data.forecast} scrollToEnd title='Forecast' />
    </Tab>

    <Tab title='Revenue next week' subtitle='In dollars'>
      <Txt>
        Lorem ipsum ...
      </Txt>
    </Tab>

    <Tab title='Seasonal Trends'>
      <Txt>
        Lorem ipsum ...
      </Txt>
    </Tab>
  </Tabs>
</Insight>

This would look like:

Content can be put before and after the tabs, which will stay visible even if navigating different tabs:

<Insight title='Revenue Forecast'>
  <Title>Forecast Explanation</Title>
  <Subtitle>Forcast done with 365 days of data</Subtitle>
  
  <Txt>This text is displayed above the tabs, and stays when switching the tabs.</Txt>

  <Tabs>
    <Tab title='Revenue last 7 days' subtitle='In dollars'>
      <Txt>
        Lorem ipsum ...
      </Txt>
      
      <Chart data={data.forecast} scrollToEnd title='Forecast' />
    </Tab>

    <Tab title='Revenue next week' subtitle='In dollars'>
      <Txt>
        Lorem ipsum ...
      </Txt>
    </Tab>

    <Tab title='Seasonal Trends'>
      <Txt>
        Lorem ipsum ...
      </Txt>
    </Tab>
  </Tabs>
  
  <Title>General notes</Title>
  <Subtitle>What general patterns are found?</Subtitle>
  
  <Txt>This text is displayed after the tabs, and stays when switching the tabs.</Txt>
</Insight>

This would look like:

Highlight text

Use <Highlight>Some highlighted text</Highlight> to highlight important information.

<Insight>
  <Title>Insights into your revenue</Title>
  <Subtitle>With some highlights</Subtitle>

  <Txt>
    The revenue for the last 7 days is <Highlight>up by +30%</Highlight>. Next week looks even better.
  </Txt>
</Insight>

This would look like:

List items

Use <List> to create a list with one or more <Item>item 1</Item> to create a list of items. The numbered property on <List> defaults to false and can be set to true for a list ordered with numbers.

<Insight>
  <Title>Forecasts</Title>
  <Subtitle>With some highlights</Subtitle>

  <List numbered={false}>
    <Item>Revenue next week will be <Highlight>3.4% higher</Highlight>.</Item>
    <Item>Conversion next week will be <Highlight>1.2% higher</Highlight>.</Item>
    <Item>Next month will see <Highlight>15% more</Highlight> visitors</Item>
  </List>
</Insight>

This would look like:

More components

More layout and visualization components such as Charts, Tables, Segments and Info Tables can be found in the Components api-library documentation.

#One column layout

#Here is how this one column layout looks like:

#Two column layout

#Here is how this two column layout looks like:

#Mixed one and two column layouts

#This would look like:

#This would look like:

#Titles

#This would look like:

#Sub-titles

#This would look like:

#Text

#Tabs

#This would look like:

#This would look like:

#Highlight text

#This would look like:

#List items

#This would look like:

#More components

One column layout

Here is how this one column layout looks like:

Two column layout

Here is how this two column layout looks like:

Mixed one and two column layouts

This would look like:

This would look like:

Titles

This would look like:

Sub-titles

This would look like:

Text

Tabs

This would look like:

This would look like:

Highlight text

This would look like:

List items

This would look like:

More components