Attribution score and date range filter values

src/lib/components/CaseTable.svelte

@@ -1,46 +1,53 @@
 <script>
-    import { utcFormat } from 'd3-time-format';
+	import { utcFormat } from 'd3-time-format';
-    export let cases
+	export let cases;
 </script>
 
 <div class="table-container">
-<table class="table is-striped is-fullwidth">
+	<table class="table is-striped is-fullwidth">
-    <thead>
+		<thead>
-        <tr>
+			<tr>
-            <td>Title</td>
+				<td>Title</td>
-            <td>Description</td>
+				<td>Description</td>
-            <td>Attribution date</td>
+				<td>Attribution date</td>
-            <td>Source</td>
+				<td>Source</td>
-            <td>Source category</td>
+				<td>Source category</td>
-            <td>Actor nation</td>
+				<td>Actor nation</td>
-        </tr>
+				<td>Campaign</td>
-    </thead>
+			</tr>
-    <tbody>
+		</thead>
-        {#each cases as attrCase}
+		<tbody>
-        {#if attrCase.show}
+			{#each cases as attrCase}
-            <tr id={'case-' + attrCase.attribution_id}>
+				{#if attrCase.show}
-                <td>{attrCase.short_title}</td>
+					<tr id={'case-' + attrCase.attribution_id}>
-                <td>{attrCase.short_description}</td>
+						<td>{attrCase.short_title}</td>
-                <td>{utcFormat('%B %d, %Y')(new Date(attrCase.attribution_date))}</td>
+						<td>{attrCase.short_description}</td>
-                <td>{attrCase.source}</td>
+						<td>{utcFormat('%B %d, %Y')(new Date(attrCase.attribution_date))}</td>
-                <td>{attrCase.source_category}</td>
+						<td>{attrCase.source}</td>
-                <td>{#each attrCase.actor_nation as nation, i}
+						<td>{attrCase.source_category}</td>
-                    {attrCase.actor_nation.length != (i + 1) ? nation + ', ' : nation}
+						<td
-                    {/each}</td>
+							>{#each attrCase.actor_nation as nation, i}
-            </tr>
+								{attrCase.actor_nation.length != i + 1 ? nation + ', ' : nation}
-            {/if}
+							{/each}</td
-        {/each}
+						>
-    </tbody>
+						<td>
-</table>
+							{#each attrCase.campaign as camp, i}
+								{attrCase.campaign.length != i + 1 ? camp + ', ' : camp}
+							{/each}
+						</td>
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
 </div>
 
 <style>
-    thead {
+	thead {
-        font-weight: bold;
+		font-weight: bold;
-    }
+	}
-    .table-container {
+	.table-container {
-        max-height: 800px;
+		max-height: 800px;
-        overflow-y: scroll;
+		overflow-y: scroll;
-    }
+	}
 </style>
-

src/lib/components/Controls.svelte

@@ -4,6 +4,7 @@
 	import DateRangeSlider from '$lib/components/DateRangeSlider.svelte';
 	import SearchText from '$lib/components/SearchText.svelte';
 	import Share from '$lib/components/Share.svelte';
+	import { utcFormat } from 'd3-time-format';
 	//import { attributionScoreScale } from '../../stores/scales';
 	import {
 		platformFilter,
@@ -21,7 +22,7 @@
 		defaultTimeRange
 	} from '../../stores/filters';
 
-	//$: console.log($timeRangeFilter)
+	const timeFormat = utcFormat('%m/%d/%y')
 
 	export let cases;
 
@@ -71,7 +72,7 @@
 			/>
 			<Slider
 				value={$attributionScoreFilter}
-				label="Attribution Score"
+				label={`Attribution Score: ${$attributionScoreFilter[0]} - ${$attributionScoreFilter[1]}`}
 				min={attributionScoreDef[0]}
 				max={attributionScoreDef[1]}
 				showHandleLabels={false}
@@ -117,7 +118,7 @@
 			></Dropdown>
 			<DateRangeSlider
 				value={timeDummyRange}
-				label="Date Range"
+				label={`Date Range: ${timeFormat($timeRangeFilter[0])} - ${timeFormat($timeRangeFilter[1])}`}
 				min={0}
 				max={10}
 				showHandleLabels={false}