diff --git a/components/src/components/prevalence-over-time-bubble-chart.ts b/components/src/components/prevalence-over-time-bubble-chart.ts
index ee76492b..d92728f9 100644
--- a/components/src/components/prevalence-over-time-bubble-chart.ts
+++ b/components/src/components/prevalence-over-time-bubble-chart.ts
@@ -2,18 +2,16 @@ import { customElement, property } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import { Chart, registerables } from 'chart.js';
import { TemporalGranularity } from '../types';
-import { addUnit, minusTemporal, Temporal } from '../temporal';
+import { addUnit, minusTemporal } from '../temporal';
import { getMinMaxNumber } from '../utils';
import { getYAxisScale, ScaleType } from './container/component-scaling-selector';
import { LogitScale } from './charts/LogitScale';
+import { PrevalenceOverTimeData } from '../query/queryPrevalenceOverTime';
@customElement('gs-prevalence-over-time-bubble-chart')
export class PrevalenceOverTimeBubbleChart extends LitElement {
@property({ type: Array })
- data: {
- displayName: string;
- content: { dateRange: Temporal | null; prevalence: number; count: number; total: number }[];
- }[] = [];
+ data: PrevalenceOverTimeData = [];
@property({ type: String })
granularity: TemporalGranularity = 'day';
diff --git a/components/src/components/prevalence-over-time-line-bar-chart.ts b/components/src/components/prevalence-over-time-line-bar-chart.ts
index 18ef5e0c..f94f02ba 100644
--- a/components/src/components/prevalence-over-time-line-bar-chart.ts
+++ b/components/src/components/prevalence-over-time-line-bar-chart.ts
@@ -1,17 +1,14 @@
import { customElement, property } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import { Chart, ChartConfiguration, registerables } from 'chart.js';
-import { Temporal } from '../temporal';
import { getYAxisScale, ScaleType } from './container/component-scaling-selector';
import { LogitScale } from './charts/LogitScale';
+import { PrevalenceOverTimeData } from '../query/queryPrevalenceOverTime';
@customElement('gs-prevalence-over-time-line-bar-chart')
export class PrevalenceOverTimeLineBarChart extends LitElement {
@property({ type: Array })
- data: {
- displayName: string;
- content: { dateRange: Temporal | null; prevalence: number }[];
- }[] = [];
+ data: PrevalenceOverTimeData = [];
@property()
type: 'line' | 'bar' = 'bar';
diff --git a/components/src/components/prevalence-over-time-table.ts b/components/src/components/prevalence-over-time-table.ts
index b7c231e9..a5e462e2 100644
--- a/components/src/components/prevalence-over-time-table.ts
+++ b/components/src/components/prevalence-over-time-table.ts
@@ -1,15 +1,13 @@
import { customElement, property } from 'lit/decorators.js';
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
import { TemporalGranularity } from '../types';
-import { Temporal } from '../temporal';
+import { PrevalenceOverTimeData } from '../query/queryPrevalenceOverTime';
+import { TailwindElement } from '../tailwind-element';
@customElement('gs-prevalence-over-time-table')
-export class PrevalenceOverTimeTable extends LitElement {
+export class PrevalenceOverTimeTable extends TailwindElement() {
@property({ type: Array })
- data: {
- displayName: string;
- content: { dateRange: Temporal | null; prevalence: number }[];
- }[] = [];
+ data: PrevalenceOverTimeData = [];
@property({ type: String })
granularity: TemporalGranularity = 'day';
@@ -20,15 +18,25 @@ export class PrevalenceOverTimeTable extends LitElement {
${this.granularity}
- ${this.data.map((d) => html`${d.displayName} `)}
+ ${this.data.map(
+ (dataset) => html`
+ ${dataset.displayName} prevalence
+ ${dataset.displayName} count
+ `,
+ )}