locsec/interference2024
1
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

CasesControls

Просмотр исходного кода
Этот коммит содержится в:
Maarten 2024-10-11 15:36:07 +02:00
родитель 467e9de806
Коммит 2ea981c562
3 изменённых файлов: 100 добавлений и 68 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
src/lib/components/CaseCard.svelte
Просмотреть файл

@ -77,7 +77,7 @@
<div class="card-content">
<div class="content">
{#if expanded}
<p>{utcFormat('%B %d, %Y')(new Date(cardData.attribution_date))}</p>
<p>{utcFormat('%B %-d, %Y')(new Date(cardData.attribution_date))}</p>
<p><a href={cardData.attribution_url_x} target="_blank">{cardData.source}</a></p>
{/if}
<p>{cardData.short_description}</p>
@ -163,4 +163,7 @@
.score-bar-wrapper p {
font-size: 0.7rem;
}
button {
margin: 0.2rem;
}
</style>

68
src/lib/components/CasesControls.svelte Обычный файл
Просмотреть файл

@ -0,0 +1,68 @@
<script>
export let displayDataAs
export let selectedSorting
const sortOptions = [
{ id: 'attribution_date', label: 'Attribution Date', type: 'date' },
{ id: 'attribution_score', label: 'Attribution Score', type: 'number' },
{ id: 'actor_nation', label: 'Actor Nation', type: 'array' },
{ id: 'platform', label: 'Platform', type: 'array' },
{ id: 'source', label: 'Source', type: 'array' },
{ id: 'source_category', label: 'Source Category', type: 'string' }
];
</script>
<div class="container cases-controls">
<div class="cases-control">
<div class="buttons has-addons">
<button
class={displayDataAs == 'Table'
? 'button is-dark is-selected is-small'
: 'button is-small'}
on:click={() => {
displayDataAs = 'Table';
}}>Table</button
>
<button
class={displayDataAs == 'Cards'
? 'button is-dark is-selected is-small'
: 'button is-small'}
on:click={() => {
displayDataAs = 'Cards';
}}>Cards</button
>
</div>
</div>
<div class="cases-control">
<label for="sort-select" class="sort-label">Sort cases by </label>
<div class="select is-small">
<select bind:value={selectedSorting} id="sort-select">
{#each sortOptions as sortOpt}
<option value={sortOpt}>
{sortOpt.label}
</option>
{/each}
</select>
</div>
</div>
<div class="cases-control">
<a
href="https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat_2024_attribution_data.csv"
class="button is-small">Download the data</a
>
</div>
</div>
<style>
.cases-controls {
margin-bottom: 1rem;
}
.cases-control {
display: inline-block;
margin-right: 3rem;
}
.sort-label {
font-size: 0.9rem;
}
</style>

65
src/routes/+page.svelte
Просмотреть файл

@ -12,6 +12,7 @@
import CardModal from '$lib/components/CardModal.svelte';
import AnimatedFilterIcon from '$lib/components/AnimatedFilterIcon.svelte';
import Collapsible from '$lib/components/Collapsible.svelte';
import CasesControls from '$lib/components/CasesControls.svelte';
import { splitString, haveOverlap, withinRange, includesTextSearch } from '$lib/utils/misc';
//import { setScales } from '$lib/utils/scales';
import { page } from '$app/stores';
@ -85,7 +86,10 @@
campaignFilter.init(cases, 'campaign');
$attributionScoreFilter = attributionScoreDef;
//$timeRangeFilter = extent(cases.map((d) => new Date(d.attribution_date)));
$defaultTimeRange = [new Date('2024-01-01'), max(cases.map((d) => new Date(d.attribution_date)))];
$defaultTimeRange = [
new Date('2024-01-01'),
max(cases.map((d) => new Date(d.attribution_date)))
];
$timeRangeFilter = $defaultTimeRange;
$fullTimeRange = extent(cases.map((d) => new Date(d.attribution_date)));
//$fullTimeRange = [new Date('2022-01-01'), max(cases.map((d) => new Date(d.attribution_date)))];
@ -249,7 +253,6 @@
? 'section sidebar closed controls'
: 'section sticky controls'}
>
<Controls {cases}></Controls>
</section>
{/if}
@ -264,55 +267,16 @@
</div>
</section>
<section class="section">
<div class="container cases-controls">
<div class="field has-addons cases-control">
<div class="buttons has-addons">
<button
class={displayDataAs == 'Table'
? 'button is-dark is-selected is-small'
: 'button is-small'}
on:click={() => {
displayDataAs = 'Table';
}}>Table</button
>
<button
class={displayDataAs == 'Cards'
? 'button is-dark is-selected is-small'
: 'button is-small'}
on:click={() => {
displayDataAs = 'Cards';
}}>Cards</button
>
</div>
</div>
<div class="cases-control">
<label for="sort-select">Sort cases by </label>
<div class="select is-small">
<select bind:value={selectedSorting} id="sort-select">
{#each sortOptions as sortOpt}
<option value={sortOpt}>
{sortOpt.label}
</option>
{/each}
</select>
</div>
</div>
</div>
</section>
{#if displayDataAs == 'Cards'}
<section class="section">
<div class="container">
<a
href="https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat_2024_attribution_data.csv"
>Download the data</a
>
<CasesControls bind:displayDataAs bind:selectedSorting></CasesControls>
<div class="grid is-col-min-16">
{#each sortedCases as attrCase}
{#if attrCase.show}
<div class="cell">
<CaseCard cardData={attrCase} expanded={false} bind:modalOpen bind:activeCaseData></CaseCard>
<CaseCard cardData={attrCase} expanded={false} bind:modalOpen bind:activeCaseData
></CaseCard>
</div>
{/if}
{/each}
@ -324,10 +288,7 @@
{#if displayDataAs == 'Table' && sortedCases.length > 0}
<section class="section">
<div class="container">
<a
href="https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat_2024_attribution_data.csv"
>Download the data</a
>
<CasesControls bind:displayDataAs bind:selectedSorting></CasesControls>
<CaseTable cases={sortedCases}></CaseTable>
</div>
</section>
@ -384,11 +345,11 @@
padding: 1rem;
z-index: 750;
}
.cases-controls {
text-align: center;
}
.cases-control {
display: inline-block;
margin-left: 3rem;
margin-right: 3rem;
}
.sort-label {
font-size: 0.9rem;
}
</style>