Merge pull request #279 from fastenhealth/default-dashboard-tweaks

This commit is contained in:
Jason Kulatunga 2023-10-13 21:38:41 -07:00 committed by GitHub
commit 04c1429e8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 1191 additions and 128 deletions

View File

@ -5,124 +5,29 @@
"description": "An example dashboard to show-off the power of Fasten widgets",
"widgets": [
{
"title_text": "Diabetes Tracking",
"title_text": "Records Summary",
"description_text": "Track key metrics for your chronic disease (eg. Diabetes). The data within this widget is not reflective of your health record, and is only present for demonstrational purposes.",
"x": 0,
"y": 0,
"width": 8,
"height": 5,
"item_type": "complex-line-widget"
},
{
"title_text": "Weight",
"description_text": "",
"x": 8,
"y": 0,
"width": 2,
"height": 2,
"item_type": "simple-line-chart-widget",
"queries": [{
"q": {
"select": [
"valueQuantity.value as data",
"valueQuantity.unit as unit",
"(effectiveDateTime | issued).first() as label"
],
"from": "Observation",
"where": {
"code": "http://loinc.org|29463-7,http://loinc.org|3141-9,http://snomed.info/sct|27113001"
}
}
}],
"parsing": {
"xAxisKey": "label",
"yAxisKey": "data"
}
},
{
"title_text": "Height",
"description_text": "",
"x": 10,
"y": 0,
"width": 2,
"height": 2,
"item_type": "simple-line-chart-widget",
"queries": [{
"q": {
"select": [
"valueQuantity.value as data",
"valueQuantity.unit as unit",
"(effectiveDateTime | issued).first() as label"
],
"from": "Observation",
"where": {
"code": "http://loinc.org|8302-2"
}
}
}],
"parsing": {
"xAxisKey": "label",
"yAxisKey": "data"
}
},
{
"title_text": "Blood Pressure",
"description_text": "How much pressure your blood is exerting against your artery walls when the heart beats",
"x": 8,
"y": 2,
"width": 4,
"height": 3,
"item_type": "grouped-bar-chart-widget",
"queries": [
{
"q": {
"select": [
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8462-4').valueQuantity.value as data",
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8462-4').valueQuantity.unit as unit"
],
"from": "Observation",
"where": {
"componentCode": "http://loinc.org|8462-4"
}
},
"dataset_options": {
"label": "Diastolic"
}
},
{
"q": {
"select": [
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8480-6').valueQuantity.value as data",
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8480-6').valueQuantity.unit as unit"
],
"from": "Observation",
"where": {
"componentCode": "http://loinc.org|8480-6"
}
},
"dataset_options": {
"label": "Systolic"
}
}],
"parsing": {
"xAxisKey": "id",
"yAxisKey": "data"
}
"height": 6,
"item_type": "records-summary-widget"
},
{
"title_text": "Patient Vitals",
"description_text": "",
"x": 0,
"y": 5,
"x": 8,
"y": 0,
"width": 4,
"height": 5,
"height": 6,
"item_type": "patient-vitals-widget"
},
{
"title_text": "Observations by Type",
"description_text": "",
"x": 4,
"y": 5,
"x": 0,
"y": 6,
"width": 8,
"height": 5,
"item_type": "donut-chart-widget",
@ -141,11 +46,113 @@
"key": "value"
}
},
{
"title_text": "Weight",
"description_text": "",
"x": 8,
"y": 6,
"width": 2,
"height": 2,
"item_type": "simple-line-chart-widget",
"queries": [{
"q": {
"select": [
"valueQuantity.value as data",
"valueQuantity.unit as unit",
"(effectiveDateTime | issued).first() as label"
],
"from": "Observation",
"where": {
"code": "http://loinc.org|29463-7,http://loinc.org|3141-9,http://snomed.info/sct|27113001"
},
"limit": 50
}
}],
"parsing": {
"xAxisKey": "label",
"yAxisKey": "data"
}
},
{
"title_text": "Height",
"description_text": "",
"x": 10,
"y": 6,
"width": 2,
"height": 2,
"item_type": "simple-line-chart-widget",
"queries": [{
"q": {
"select": [
"valueQuantity.value as data",
"valueQuantity.unit as unit",
"(effectiveDateTime | issued).first() as label"
],
"from": "Observation",
"where": {
"code": "http://loinc.org|8302-2"
},
"limit": 50
}
}],
"parsing": {
"xAxisKey": "label",
"yAxisKey": "data"
}
},
{
"title_text": "Blood Pressure",
"description_text": "How much pressure your blood is exerting against your artery walls when the heart beats",
"x": 8,
"y": 8,
"width": 4,
"height": 3,
"item_type": "grouped-bar-chart-widget",
"queries": [
{
"q": {
"select": [
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8462-4').valueQuantity.value as data",
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8462-4').valueQuantity.unit as unit"
],
"from": "Observation",
"where": {
"componentCode": "http://loinc.org|8462-4"
},
"limit": 50
},
"dataset_options": {
"label": "Diastolic"
}
},
{
"q": {
"select": [
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8480-6').valueQuantity.value as data",
"component.where(code.coding.system = 'http://loinc.org' and code.coding.code = '8480-6').valueQuantity.unit as unit"
],
"from": "Observation",
"where": {
"componentCode": "http://loinc.org|8480-6"
},
"limit": 50
},
"dataset_options": {
"label": "Systolic"
}
}],
"parsing": {
"xAxisKey": "id",
"yAxisKey": "data"
}
},
{
"title_text": "Compliance",
"description_text": "Use to track important healthcare and medical tasks.",
"x": 0,
"y": 10,
"y": 11,
"width": 4,
"height": 2,
"item_type": "dual-gauges-widget",
@ -184,7 +191,7 @@
"title_text": "Recent Encounters",
"description_text": "Recent interactions with healthcare providers",
"x": 4,
"y": 10,
"y": 11,
"width": 8,
"height": 4,
"item_type": "table-widget",
@ -197,7 +204,8 @@
"participant.individual.display as provider"
],
"from": "Encounter",
"where": {}
"where": {},
"limit": 50
}
}],
"parsing": {

View File

@ -0,0 +1,26 @@
{
"id": "secondary",
"schema_version": "1.0",
"title": "Secondary Dashboard",
"description": "An second dashboard to show-off the flexibility of the dashboard system.",
"widgets": [
{
"title_text": "Records Summary",
"description_text": "Track key metrics for your chronic disease (eg. Diabetes). The data within this widget is not reflective of your health record, and is only present for demonstrational purposes.",
"x": 0,
"y": 0,
"width": 8,
"height": 6,
"item_type": "records-summary-widget"
},
{
"title_text": "Care Team",
"description_text": "Track key metrics for your chronic disease (eg. Diabetes). The data within this widget is not reflective of your health record, and is only present for demonstrational purposes.",
"x": 8,
"y": 0,
"width": 4,
"height": 6,
"item_type": "image-list-group-widget"
}
]
}

View File

@ -11,15 +11,7 @@ import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridSta
import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
import {CommonModule} from '@angular/common';
import {WidgetsModule} from '../../widgets/widgets.module';
import {ComplexLineWidgetComponent} from '../../widgets/complex-line-widget/complex-line-widget.component';
import {DashboardWidgetComponent} from '../../widgets/dashboard-widget/dashboard-widget.component';
import {DonutChartWidgetComponent} from '../../widgets/donut-chart-widget/donut-chart-widget.component';
import {DualGaugesWidgetComponent} from '../../widgets/dual-gauges-widget/dual-gauges-widget.component';
import {GroupedBarChartWidgetComponent} from '../../widgets/grouped-bar-chart-widget/grouped-bar-chart-widget.component';
import {PatientVitalsWidgetComponent} from '../../widgets/patient-vitals-widget/patient-vitals-widget.component';
import {SimpleLineChartWidgetComponent} from '../../widgets/simple-line-chart-widget/simple-line-chart-widget.component';
import {TableWidgetComponent} from '../../widgets/table-widget/table-widget.component';
import {WidgetsModule, WidgetComponents} from '../../widgets/widgets.module';
import {DashboardWidgetComponentInterface} from '../../widgets/dashboard-widget-component-interface';
/** events handlers emitters signature for different events */
@ -137,16 +129,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
) {
// register all our dynamic components created in the grid
GridstackComponent.addComponentToSelectorType([
ComplexLineWidgetComponent,
DashboardWidgetComponent,
DonutChartWidgetComponent,
DualGaugesWidgetComponent,
GroupedBarChartWidgetComponent,
PatientVitalsWidgetComponent,
SimpleLineChartWidgetComponent,
TableWidgetComponent,
]);
GridstackComponent.addComponentToSelectorType(WidgetComponents());
// set globally our method to create the right widget type
GridStack.addRemoveCB = gsCreateNgComponents;
GridStack.saveCB = gsSaveAdditionalNgInfo;

View File

@ -3,7 +3,7 @@ import * as _ from 'lodash';
export class DashboardWidgetConfig {
id?: string
item_type: "complex-line-widget" | "donut-chart-widget" | "dual-gauges-widget" | "grouped-bar-chart-widget" | "patient-vitals-widget" | "simple-line-chart-widget" | "table-widget"
item_type: "image-list-group-widget" | "complex-line-widget" | "donut-chart-widget" | "dual-gauges-widget" | "grouped-bar-chart-widget" | "patient-vitals-widget" | "simple-line-chart-widget" | "table-widget" | "records-summary-widget"
title_text: string
description_text: string

View File

@ -0,0 +1,35 @@
<ng-container [ngTemplateOutlet]="loading ? showLoading : (!loading && isEmpty) ? showEmpty : showChart"></ng-container>
<ng-template #showLoading>
<loading-widget></loading-widget>
</ng-template>
<ng-template #showEmpty>
<empty-widget></empty-widget>
</ng-template>
<ng-template #showChart>
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<img src="../img/faces/face6.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
<div>
<h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Ester Howard</h6>
<span class="d-block tx-11 text-muted">Neurologist, UCSF</span>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<img src="../img/faces/face7.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
<div>
<h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Joel Mendez</h6>
<span class="d-block tx-11 text-muted">General Medicine, Kaiser</span>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<img src="../img/faces/face8.jpg" class="wd-30 rounded-circle mg-r-15" alt="">
<div>
<h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Dr. Marianne Audrey</h6>
<span class="d-block tx-11 text-muted">orthopedic surgeon, UCSF</span>
</div>
</li>
</ul>
</ng-template><!-- card -->

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ImageListGroupWidgetComponent } from './image-list-group-widget.component';
describe('ImageListGroupWidgetComponent', () => {
let component: ImageListGroupWidgetComponent;
let fixture: ComponentFixture<ImageListGroupWidgetComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ImageListGroupWidgetComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ImageListGroupWidgetComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,35 @@
import { Component, OnInit } from '@angular/core';
import {NgChartsModule} from 'ng2-charts';
import {CommonModule} from '@angular/common';
import {LoadingWidgetComponent} from '../loading-widget/loading-widget.component';
import {EmptyWidgetComponent} from '../empty-widget/empty-widget.component';
import {DashboardWidgetComponent} from '../dashboard-widget/dashboard-widget.component';
import {DashboardWidgetConfig} from '../../models/widget/dashboard-widget-config';
@Component({
standalone: true,
imports: [NgChartsModule, CommonModule, LoadingWidgetComponent, EmptyWidgetComponent],
selector: 'image-list-group-widget',
templateUrl: './image-list-group-widget.component.html',
styleUrls: ['./image-list-group-widget.component.scss']
})
export class ImageListGroupWidgetComponent extends DashboardWidgetComponent implements OnInit {
ngOnInit(): void {
//manually define the widget config, rather than pull from the configuration file
this.widgetConfig = {
id: 'image-list-group-widget',
item_type: 'image-list-group-widget',
description_text: 'Displays a summary of patient records',
width: 4,
height: 5,
title_text: 'Medical Records',
queries: []
} as DashboardWidgetConfig
super.ngOnInit();
this.loading = false
this.isEmpty = false
}
}

View File

@ -0,0 +1,47 @@
<ng-container [ngTemplateOutlet]="loading ? showLoading : (!loading && isEmpty) ? showEmpty : showChart"></ng-container>
<ng-template #showLoading>
<loading-widget></loading-widget>
</ng-template>
<ng-template #showEmpty>
<empty-widget></empty-widget>
</ng-template>
<ng-template #showChart>
<div class="card card-dashboard-sixteen">
<div class="card-header">
<h6 class="card-title">Medical Records</h6>
</div><!-- card-header -->
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="table mg-b-0">
<tbody>
<tr *ngFor="let groupInfo of groupLookup">
<td>
<div class="az-img-user"><img src="assets/icons/{{groupInfo.imageName}}.svg" alt=""></div>
</td>
<td>
<h6 class="mg-b-0 tx-inverse">{{groupInfo.displayName}}</h6>
<small class="tx-11 tx-gray-500" *ngIf="groupInfo.includedResourceTypes.length > 1">
<span *ngFor="let resourceTypes of groupInfo.includedResourceTypes">
{{resourceTypes}}<br/>
</span>
</small>
</td>
<td>
<h6 class="mg-b-0 tx-inverse">{{groupInfo.count}}</h6>
<small class="tx-11 tx-gray-500">Records</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- card-body -->
</div>
</ng-template><!-- card -->

View File

@ -0,0 +1,14 @@
tbody {
display: grid;
grid-template-columns: repeat(2, auto);
}
/* Borders */
/* The margin declarations are used to simulate border-collapse:collapse */
tr {
margin: 0 0 -1px -1px;
//border: 1px solid black;
}
tbody:not(:empty) {
margin: 0 0 1px 1px;
}

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RecordsSummaryWidgetComponent } from './records-summary-widget.component';
describe('RecordsSummaryWidgetComponent', () => {
let component: RecordsSummaryWidgetComponent;
let fixture: ComponentFixture<RecordsSummaryWidgetComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RecordsSummaryWidgetComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RecordsSummaryWidgetComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,214 @@
import { Component, OnInit } from '@angular/core';
import {NgChartsModule} from 'ng2-charts';
import {CommonModule} from '@angular/common';
import {MomentModule} from 'ngx-moment';
import {LoadingWidgetComponent} from '../loading-widget/loading-widget.component';
import {EmptyWidgetComponent} from '../empty-widget/empty-widget.component';
import {DashboardWidgetComponent} from '../dashboard-widget/dashboard-widget.component';
import {DashboardWidgetConfig} from '../../models/widget/dashboard-widget-config';
import {Summary} from '../../models/fasten/summary';
class GroupedSummary {
displayName: string
imageName: string
resourceTypes: string[]
includedResourceTypes: string[] = []
count: number = 0
}
@Component({
standalone: true,
imports: [CommonModule, LoadingWidgetComponent, EmptyWidgetComponent],
selector: 'records-summary-widget',
templateUrl: './records-summary-widget.component.html',
styleUrls: ['./records-summary-widget.component.scss']
})
export class RecordsSummaryWidgetComponent extends DashboardWidgetComponent implements OnInit {
// constructor() { }
summary: Summary
groupLookup: GroupedSummary[] = [
{
displayName: 'Allergies',
imageName: 'allergies',
resourceTypes: ['AllergyIntolerance', 'AdverseEvent'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Care Team',
imageName: 'care-team',
resourceTypes: ['CareTeam', 'Practitioner', 'Patient', 'RelatedPerson', 'PractitionerRole'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Clinical Notes',
imageName: 'clinical-notes',
resourceTypes: ['DocumentReference', 'DiagnosticReport'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Files',
imageName: 'files',
resourceTypes: ['Binary', 'Media'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Lab Results',
imageName: 'lab-results',
resourceTypes: ['Observation', 'Specimen'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Health Issues',
imageName: 'health-issues',
resourceTypes: ['Conditions', 'Encounters'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Facilities',
imageName: 'facilities',
resourceTypes: ['Organization', 'Location'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Health Goals',
imageName: 'health-goals',
resourceTypes: ['Goal'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Health Insurance',
imageName: 'health-insurance',
resourceTypes: ['Coverage', 'ExplanationOfBenefit', 'Claim'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Health Assessments',
imageName: 'health-assessments',
resourceTypes: ['QuestionnaireResponse','Questionnaire', 'CarePlan', 'FamilyMemberHistory'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Immunizations',
imageName: 'immunizations',
resourceTypes: ['Immunization'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Implants',
imageName: 'implants',
resourceTypes: ['Device'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Medications',
imageName: 'medications',
resourceTypes: ['Medication', 'MedicationRequest', 'MedicationStatement', 'MedicationAdministration', 'MedicationDispense'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Demographics',
imageName: 'demographics',
resourceTypes: ['Patient'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Procedures',
imageName: 'procedures',
resourceTypes: ['Procedure','ServiceRequest'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Provenance',
imageName: 'provenance',
resourceTypes: ['Provenance'],
includedResourceTypes:[],
count: 0
},
{
displayName: 'Appointments',
imageName: 'appointments',
resourceTypes: ['Appointment', 'Schedule', 'Slot'],
includedResourceTypes:[],
count: 0
}
]
ngOnInit(): void {
//manually define the widget config, rather than pull from the configuration file
this.widgetConfig = {
id: 'records-summary-widget',
item_type: 'records-summary-widget',
description_text: 'Displays a summary of patient records',
width: 4,
height: 5,
title_text: 'Medical Records',
queries: [
]
} as DashboardWidgetConfig
super.ngOnInit();
this.chartProcessQueryResults(null)
}
chartProcessQueryResults(queryResults: any[]) {
this.fastenApi.getSummary().subscribe((summary: Summary) => {
this.summary = summary
for (let resourceTypeCount of summary.resource_type_counts) {
let foundGroup = false
for (let groupKey in this.groupLookup) {
let group = this.groupLookup[groupKey]
if (group.resourceTypes.indexOf(resourceTypeCount.resource_type) > -1) {
foundGroup = true
this.groupLookup[groupKey].count += resourceTypeCount.count
this.groupLookup[groupKey].includedResourceTypes.push(resourceTypeCount.resource_type)
}
}
if (!foundGroup) {
this.groupLookup[resourceTypeCount.resource_type] = {
displayName: resourceTypeCount.resource_type,
resourceTypes: [resourceTypeCount.resource_type],
count: resourceTypeCount.count
}
}
}
//filter any groups with 0 counts
this.groupLookup = this.groupLookup.filter((group) => {
return group.count > 0
})
if(this.summary.resource_type_counts.length > 0){
this.isEmpty = false
}
this.loading = false
},
(error) => {
this.loading = false
},
() => {
console.log('completed getting summary')
})
}
}

View File

@ -0,0 +1,50 @@
import type { Meta, StoryObj } from '@storybook/angular';
import {RecordsSummaryWidgetComponent} from './records-summary-widget.component';
import {applicationConfig, moduleMetadata} from '@storybook/angular';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
import {importProvidersFrom} from '@angular/core';
import {CommonModule} from '@angular/common';
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<RecordsSummaryWidgetComponent> = {
title: 'Widget/RecordsSummaryWidget',
component: RecordsSummaryWidgetComponent,
decorators: [
applicationConfig({
providers: [
{
provide: HttpClient,
useClass: HttpClient
},
{
provide: HTTP_CLIENT_TOKEN,
useClass: HttpClient,
},
importProvidersFrom(HttpClientModule)
]
}),
moduleMetadata({
imports: [CommonModule, HttpClientModule],
})
],
tags: ['autodocs'],
render: (args: RecordsSummaryWidgetComponent) => ({
props: {
backgroundColor: null,
...args,
},
}),
argTypes: {
},
};
export default meta;
type Story = StoryObj<RecordsSummaryWidgetComponent>;
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
export const Example: Story = {
args: {
}
};

View File

@ -1,4 +1,4 @@
import { NgModule } from '@angular/core';
import {Component, NgModule, Type} from '@angular/core';
import {ComplexLineWidgetComponent} from './complex-line-widget/complex-line-widget.component';
import {DonutChartWidgetComponent} from './donut-chart-widget/donut-chart-widget.component';
import {DualGaugesWidgetComponent} from './dual-gauges-widget/dual-gauges-widget.component';
@ -9,6 +9,8 @@ import {TableWidgetComponent} from './table-widget/table-widget.component';
import { LoadingWidgetComponent } from './loading-widget/loading-widget.component';
import { EmptyWidgetComponent } from './empty-widget/empty-widget.component';
import {DashboardWidgetComponent} from './dashboard-widget/dashboard-widget.component';
import { RecordsSummaryWidgetComponent } from './records-summary-widget/records-summary-widget.component';
import { ImageListGroupWidgetComponent } from './image-list-group-widget/image-list-group-widget.component';
@NgModule({
imports: [
@ -18,6 +20,8 @@ import {DashboardWidgetComponent} from './dashboard-widget/dashboard-widget.comp
DualGaugesWidgetComponent,
GroupedBarChartWidgetComponent,
PatientVitalsWidgetComponent,
RecordsSummaryWidgetComponent,
ImageListGroupWidgetComponent,
SimpleLineChartWidgetComponent,
TableWidgetComponent,
LoadingWidgetComponent,
@ -32,6 +36,8 @@ import {DashboardWidgetComponent} from './dashboard-widget/dashboard-widget.comp
DualGaugesWidgetComponent,
GroupedBarChartWidgetComponent,
PatientVitalsWidgetComponent,
RecordsSummaryWidgetComponent,
ImageListGroupWidgetComponent,
SimpleLineChartWidgetComponent,
TableWidgetComponent,
LoadingWidgetComponent,
@ -41,3 +47,21 @@ import {DashboardWidgetComponent} from './dashboard-widget/dashboard-widget.comp
})
export class WidgetsModule { }
//when adding widgets to this list, you must also register the widget id in
// frontend/src/app/models/widget/dashboard-widget-config.ts
export function WidgetComponents(): Type<Object>[] {
return [
ComplexLineWidgetComponent,
DonutChartWidgetComponent,
DualGaugesWidgetComponent,
GroupedBarChartWidgetComponent,
PatientVitalsWidgetComponent,
RecordsSummaryWidgetComponent,
ImageListGroupWidgetComponent,
SimpleLineChartWidgetComponent,
TableWidgetComponent,
LoadingWidgetComponent,
EmptyWidgetComponent
]
}

View File

@ -0,0 +1,41 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #ffd67b;
}
.cls-2 {
fill: #fff;
}
.cls-3 {
fill: #bde9ff;
}
.cls-4 {
fill: #0098e3;
}
.cls-5 {
fill: #e89b00;
}
</style>
</defs>
<g>
<path class="cls-1" d="M29.29,29.05s-14-22-2.81-24.74S34.91,17.24,29.29,29.05Z"/>
<path class="cls-1" d="M29.24,28.83S3.73,23.18,9.76,13.32,24.87,16.51,29.24,28.83Z"/>
<path class="cls-1" d="M29.05,28.71s-22,14-24.74,2.81S17.24,23.09,29.05,28.71Z"/>
<path class="cls-1" d="M28.83,28.76S23.18,54.27,13.32,48.24,16.51,33.13,28.83,28.76Z"/>
<path class="cls-1" d="M28.71,29s14,22,2.81,24.74S23.09,40.76,28.71,29Z"/>
<path class="cls-1" d="M28.76,29.17s25.51,5.65,19.48,15.51S33.13,41.49,28.76,29.17Z"/>
<path class="cls-1" d="M29,29.29s22-14,24.74-2.81S40.76,34.91,29,29.29Z"/>
<path class="cls-1" d="M29.17,29.24S34.82,3.73,44.68,9.76,41.49,24.87,29.17,29.24Z"/>
</g>
<path class="cls-2" d="M58,32.66a6.68,6.68,0,0,0-9.44.06L39.81,41.6h0l-6.88,7A6.68,6.68,0,1,0,42.43,58L50.25,50h0l7.82-7.92A6.67,6.67,0,0,0,58,32.66Z"/>
<g>
<path class="cls-3" d="M49.63,51.24l8.5-8.61a6.48,6.48,0,0,0-.06-9.17h0a6.49,6.49,0,0,0-9.17.06l-8.5,8.62Z"/>
<path class="cls-4" d="M41.31,41.21,33.72,48.9a6.49,6.49,0,0,0,.06,9.17h0A6.48,6.48,0,0,0,43,58l7.59-7.69Z"/>
</g>
<circle class="cls-5" cx="29" cy="29" r="8"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,26 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #1eb37a;
}
.cls-2 {
fill: #a5f3ca;
}
.cls-3 {
fill: #0e6b5a;
}
</style>
</defs>
<circle class="cls-1" cx="32" cy="32" r="28"/>
<circle class="cls-2" cx="32" cy="32" r="22"/>
<circle class="cls-1" cx="32" cy="32" r="17"/>
<circle class="cls-2" cx="32" cy="32" r="12"/>
<circle class="cls-1" cx="32" cy="32" r="7"/>
<path class="cls-3" d="M32.67,28.82h0a3.83,3.83,0,0,1,.62-1.4L43,14l4.17,4L36.63,29.32a5,5,0,0,1-1.46,1.09l-.26.14A1.57,1.57,0,0,1,32.67,28.82Z"/>
<polygon class="cls-3" points="43 14 43 11 48.17 4 50 11 45 17 43 14"/>
<polygon class="cls-3" points="47 18 50 18 57 11.83 50 11 44 17 47 18"/>
<polygon class="cls-3" points="33.5 29 32 32 35 30 33.5 29"/>
</svg>

After

Width:  |  Height:  |  Size: 891 B

View File

@ -0,0 +1,40 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #34b4ff;
}
.cls-2 {
fill: #0098e3;
}
.cls-3 {
fill: #ffd67b;
}
.cls-4 {
fill: #818cb0;
}
.cls-5 {
fill: #eff1f4;
}
.cls-6 {
fill: #dfe3e8;
}
</style>
</defs>
<g>
<path class="cls-1" d="M48.36,54.78,34.19,59.64a6.84,6.84,0,0,1-4.38,0L15.64,54.78a7.52,7.52,0,0,1-5.21-7.05h0A10.82,10.82,0,0,1,21.49,37.18h21A10.82,10.82,0,0,1,53.57,47.73h0A7.52,7.52,0,0,1,48.36,54.78Z"/>
<path class="cls-2" d="M35.06,37.18H28.94A1.36,1.36,0,0,0,27.65,39l2.19,6.32a2.29,2.29,0,0,0,4.32,0L36.35,39A1.36,1.36,0,0,0,35.06,37.18Z"/>
<path class="cls-3" d="M32,4a14.93,14.93,0,0,0-13.63,8.85H45.63A14.93,14.93,0,0,0,32,4Z"/>
<path class="cls-3" d="M17.07,18.93v6.64a14.93,14.93,0,0,0,29.86,0V18.93c0-.19,0-.37,0-.55H17.1C17.09,18.56,17.07,18.74,17.07,18.93Z"/>
<path class="cls-4" d="M18.37,12.85a14.78,14.78,0,0,0-1.27,5.53H46.9a14.78,14.78,0,0,0-1.27-5.53Z"/>
<g>
<circle class="cls-5" cx="32" cy="15.61" r="6.69"/>
<path class="cls-6" d="M32,9.42a6.19,6.19,0,1,1-6.19,6.19A6.2,6.2,0,0,1,32,9.42m0-1a7.19,7.19,0,1,0,7.19,7.19A7.19,7.19,0,0,0,32,8.42Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,48 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #ffd67b;
}
.cls-2 {
fill: #fdba19;
}
.cls-3 {
fill: #fffbd5;
}
.cls-4 {
fill: #243147;
}
.cls-5 {
fill: #1eb37a;
}
.cls-6 {
fill: #14866d;
}
.cls-7 {
fill: #c0c7d2;
}
</style>
</defs>
<g>
<g>
<path class="cls-1" d="M11,10H41a7,7,0,0,1,7,7V49a7,7,0,0,1-7,7H16L4,44V17A7,7,0,0,1,11,10Z"/>
<path class="cls-2" d="M10.82,44H4L16,56V49.18A5.18,5.18,0,0,0,10.82,44Z"/>
<rect class="cls-3" x="9" y="17" width="27" height="3" transform="translate(45 37) rotate(-180)"/>
<rect class="cls-3" x="9" y="22" width="17" height="3" transform="translate(35 47) rotate(-180)"/>
<rect class="cls-3" x="9" y="28" width="11" height="3" transform="translate(29 59) rotate(-180)"/>
</g>
<g>
<path class="cls-4" d="M24.35,40.66h2.24a0,0,0,0,1,0,0v5.6a1.12,1.12,0,0,1-1.12,1.12h0a1.12,1.12,0,0,1-1.12-1.12v-5.6a0,0,0,0,1,0,0Z" transform="translate(38.59 -5.12) rotate(45)"/>
<path class="cls-5" d="M57.17,18.67,32.6,43.23a4.47,4.47,0,0,1-6.33,0h0a4.48,4.48,0,0,1,0-6.34L50.83,12.33Z"/>
<path class="cls-6" d="M58,11.54a4.48,4.48,0,0,0-6.34,0l-2.18,2.18,6.34,6.34L58,17.88A4.48,4.48,0,0,0,58,11.54Z"/>
<path class="cls-7" d="M59.27,21.42l-8.75-8.76-1.75,1.76,8.75,8.75L47.89,32.8a1.24,1.24,0,0,0,1.75,1.75l9.63-9.63h0a2.47,2.47,0,0,0,0-3.5Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,30 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #34b4ff;
}
.cls-2 {
fill: #0098e3;
}
.cls-3 {
fill: #bde9ff;
}
</style>
</defs>
<g>
<rect class="cls-1" x="4" y="10" width="56" height="44" rx="6.94"/>
<path class="cls-2" d="M60,16.87A6.94,6.94,0,0,0,53,10H11a6.94,6.94,0,0,0-7,6.87V20H60Z"/>
<g>
<rect class="cls-3" x="33" y="34" width="21" height="3"/>
<rect class="cls-3" x="33" y="41" width="21" height="3"/>
<rect class="cls-3" x="33" y="27" width="12" height="3"/>
</g>
<g>
<circle class="cls-3" cx="18" cy="30" r="6"/>
<path class="cls-3" d="M16.27,38h3.47A6.27,6.27,0,0,1,26,44.27V46a0,0,0,0,1,0,0H10a0,0,0,0,1,0,0V44.27A6.27,6.27,0,0,1,16.27,38Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 881 B

View File

@ -0,0 +1,38 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #706e85;
}
.cls-2 {
fill: #c0c7d2;
}
</style>
</defs>
<rect class="cls-1" x="4" y="57" width="56" height="3" rx="1.38"/>
<path class="cls-2" d="M16.65,8.73H47.35A4.65,4.65,0,0,1,52,13.38V57a0,0,0,0,1,0,0H12a0,0,0,0,1,0,0V13.38A4.65,4.65,0,0,1,16.65,8.73Z"/>
<g>
<rect class="cls-1" x="16.55" y="22.66" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="16.55" y="31.31" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="16.55" y="39.97" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="25.57" y="22.66" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="25.57" y="31.31" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="25.57" y="39.97" width="4.88" height="5.77" rx="0.65"/>
</g>
<g>
<rect class="cls-1" x="34.55" y="22.66" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="34.55" y="31.31" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="34.55" y="39.97" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="43.57" y="22.66" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="43.57" y="31.31" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="43.57" y="39.97" width="4.88" height="5.77" rx="0.65"/>
</g>
<rect class="cls-1" x="34.55" y="14.14" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="26" y="49" width="13" height="7" rx="1.17"/>
<rect class="cls-1" x="43.57" y="14.14" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="16.55" y="14.14" width="4.88" height="5.77" rx="0.65"/>
<rect class="cls-1" x="25.57" y="14.14" width="4.88" height="5.77" rx="0.65"/>
<path class="cls-2" d="M21.87,5.89H44.13a.87.87,0,0,1,.87.87v2a0,0,0,0,1,0,0H21a0,0,0,0,1,0,0v-2A.87.87,0,0,1,21.87,5.89Z"/>
<path class="cls-2" d="M25.58,4H40.42a.58.58,0,0,1,.58.58V5.89a0,0,0,0,1,0,0H25a0,0,0,0,1,0,0V4.58A.58.58,0,0,1,25.58,4Z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,48 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #ffd67b;
}
.cls-2 {
fill: #fdba19;
}
.cls-3 {
fill: #fffbd5;
}
.cls-4 {
fill: #243147;
}
.cls-5 {
fill: #1eb37a;
}
.cls-6 {
fill: #14866d;
}
.cls-7 {
fill: #c0c7d2;
}
</style>
</defs>
<g>
<g>
<path class="cls-1" d="M11,10H41a7,7,0,0,1,7,7V49a7,7,0,0,1-7,7H16L4,44V17A7,7,0,0,1,11,10Z"/>
<path class="cls-2" d="M10.82,44H4L16,56V49.18A5.18,5.18,0,0,0,10.82,44Z"/>
<rect class="cls-3" x="9" y="17" width="27" height="3" transform="translate(45 37) rotate(-180)"/>
<rect class="cls-3" x="9" y="22" width="17" height="3" transform="translate(35 47) rotate(-180)"/>
<rect class="cls-3" x="9" y="28" width="11" height="3" transform="translate(29 59) rotate(-180)"/>
</g>
<g>
<path class="cls-4" d="M24.35,40.66h2.24a0,0,0,0,1,0,0v5.6a1.12,1.12,0,0,1-1.12,1.12h0a1.12,1.12,0,0,1-1.12-1.12v-5.6a0,0,0,0,1,0,0Z" transform="translate(38.59 -5.12) rotate(45)"/>
<path class="cls-5" d="M57.17,18.67,32.6,43.23a4.47,4.47,0,0,1-6.33,0h0a4.48,4.48,0,0,1,0-6.34L50.83,12.33Z"/>
<path class="cls-6" d="M58,11.54a4.48,4.48,0,0,0-6.34,0l-2.18,2.18,6.34,6.34L58,17.88A4.48,4.48,0,0,0,58,11.54Z"/>
<path class="cls-7" d="M59.27,21.42l-8.75-8.76-1.75,1.76,8.75,8.75L47.89,32.8a1.24,1.24,0,0,0,1.75,1.75l9.63-9.63h0a2.47,2.47,0,0,0,0-3.5Z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,31 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #de9c76;
}
.cls-2 {
fill: #f8f9fb;
}
.cls-3 {
fill: #9eacc3;
}
.cls-4 {
fill: #c0c7d2;
}
</style>
</defs>
<rect class="cls-1" x="10" y="6" width="44" height="52" rx="3.44"/>
<g>
<rect class="cls-1" x="10" y="6" width="44" height="52" rx="7"/>
<rect class="cls-2" x="15" y="9" width="34" height="45" rx="2.07"/>
<path class="cls-3" d="M21.75,6h20.5a0,0,0,0,1,0,0V9.2a1.92,1.92,0,0,1-1.92,1.92H23.67A1.92,1.92,0,0,1,21.75,9.2V6A0,0,0,0,1,21.75,6Z"/>
</g>
<rect class="cls-4" x="20" y="18" width="25" height="3"/>
<rect class="cls-4" x="20" y="24" width="25" height="3"/>
<rect class="cls-4" x="20" y="30" width="25" height="3"/>
<rect class="cls-4" x="20" y="36" width="25" height="3"/>
</svg>

After

Width:  |  Height:  |  Size: 937 B

View File

@ -0,0 +1,26 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #1eb37a;
}
.cls-2 {
fill: #a5f3ca;
}
.cls-3 {
fill: #0e6b5a;
}
</style>
</defs>
<circle class="cls-1" cx="32" cy="32" r="28"/>
<circle class="cls-2" cx="32" cy="32" r="22"/>
<circle class="cls-1" cx="32" cy="32" r="17"/>
<circle class="cls-2" cx="32" cy="32" r="12"/>
<circle class="cls-1" cx="32" cy="32" r="7"/>
<path class="cls-3" d="M32.67,28.82h0a3.83,3.83,0,0,1,.62-1.4L43,14l4.17,4L36.63,29.32a5,5,0,0,1-1.46,1.09l-.26.14A1.57,1.57,0,0,1,32.67,28.82Z"/>
<polygon class="cls-3" points="43 14 43 11 48.17 4 50 11 45 17 43 14"/>
<polygon class="cls-3" points="47 18 50 18 57 11.83 50 11 44 17 47 18"/>
<polygon class="cls-3" points="33.5 29 32 32 35 30 33.5 29"/>
</svg>

After

Width:  |  Height:  |  Size: 891 B

View File

@ -0,0 +1,45 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #c0c7d2;
}
.cls-2 {
fill: #dfe3e8;
}
.cls-3 {
fill: #f8f9fb;
}
.cls-4 {
fill: #fb7373;
}
.cls-5 {
fill: #bde9ff;
}
.cls-6 {
fill: #d1d6dd;
}
</style>
</defs>
<g>
<path class="cls-1" d="M51,58H13a7,7,0,0,1-7-7V21H58V51A7,7,0,0,1,51,58Z"/>
<path class="cls-2" d="M51,57H13a7,7,0,0,1-7-7V20H58V50A7,7,0,0,1,51,57Z"/>
<path class="cls-3" d="M51,55H13a7,7,0,0,1-7-7V19H58V48A7,7,0,0,1,51,55Z"/>
<path class="cls-4" d="M13,8H51a7,7,0,0,1,7,7v7a0,0,0,0,1,0,0H6a0,0,0,0,1,0,0V15A7,7,0,0,1,13,8Z"/>
<g>
<rect class="cls-4" x="40" y="39" width="10" height="10" rx="2.14"/>
<rect class="cls-5" x="26.5" y="39" width="10" height="10" rx="2.14"/>
<rect class="cls-5" x="13.5" y="39" width="10" height="10" rx="2.14"/>
<rect class="cls-5" x="40" y="26" width="10" height="10" rx="2.14"/>
<rect class="cls-5" x="26.5" y="26" width="10" height="10" rx="2.14"/>
<rect class="cls-5" x="13.5" y="26" width="10" height="10" rx="2.14"/>
</g>
<rect class="cls-6" x="16.82" y="4" width="5.36" height="8.93" rx="2.61"/>
<rect class="cls-6" x="41.82" y="4" width="5.36" height="8.93" rx="2.61"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,29 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #976cea;
}
.cls-2 {
fill: #d6e3ff;
}
.cls-3 {
fill: #b387ff;
}
</style>
</defs>
<rect class="cls-1" x="38.35" y="5.06" width="4.53" height="36.66" rx="1.91" transform="translate(28.43 -21.87) rotate(45)"/>
<rect class="cls-1" x="45.19" y="8.92" width="15.84" height="3.93" rx="1.17" transform="translate(23.26 -34.37) rotate(45)"/>
<rect class="cls-2" x="20.91" y="9.81" width="18.1" height="48.45" rx="4.39" transform="translate(32.84 -11.22) rotate(45)"/>
<rect class="cls-1" x="34.39" y="16.33" width="22.63" height="3.93" rx="1.4" transform="translate(26.32 -26.96) rotate(45)"/>
<polygon class="cls-1" points="10.3 48.63 8.19 54.23 9.69 55.74 15.23 53.57 10.3 48.63"/>
<path class="cls-1" d="M12.12,50.46,4.59,57.83a1.15,1.15,0,0,0-.13,1.63h0a1.16,1.16,0,0,0,1.62-.12l7.46-7.46Z"/>
<path class="cls-3" d="M12.78,33.48H28.62a0,0,0,0,1,0,0V49.21a3.9,3.9,0,0,1-3.9,3.9h-8a3.9,3.9,0,0,1-3.9-3.9V33.48a0,0,0,0,1,0,0Z" transform="translate(36.68 -1.96) rotate(45)"/>
<rect class="cls-1" x="36.32" y="16.61" width="2.07" height="5.66" transform="translate(-2.81 32.11) rotate(-45)"/>
<rect class="cls-1" x="30.77" y="22.17" width="2.07" height="5.66" transform="translate(-8.36 29.81) rotate(-45)"/>
<rect class="cls-1" x="25.21" y="27.72" width="2.07" height="5.66" transform="translate(-13.92 27.51) rotate(-45)"/>
<rect class="cls-1" x="19.66" y="33.28" width="2.07" height="5.66" transform="translate(-19.47 25.21) rotate(-45)"/>
<rect class="cls-1" x="14.1" y="38.84" width="2.07" height="5.66" transform="translate(-25.03 22.91) rotate(-45)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,25 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #c0c7d2;
}
.cls-2 {
fill: #9eacc3;
}
.cls-3 {
fill: #d1d6dd;
}
</style>
</defs>
<g>
<path class="cls-1" d="M20.23,32.69l-3.55,3.79-3.9,4.15-3.72,4-3.77,4a2.2,2.2,0,0,0,.1,3.12l7.66,7.18a2.21,2.21,0,0,0,3.11-.1l7.92-8.38,3.76-4L31.92,42l3.72-4,4-4.28L24.06,28.6Z"/>
<polygon class="cls-1" points="33.35 18.7 27.51 24.93 43.05 30.15 44.22 28.9 33.35 18.7"/>
<polygon class="cls-2" points="24.06 28.6 39.65 33.77 43.05 30.15 27.51 24.93 24.06 28.6"/>
</g>
<path class="cls-3" d="M49.51,17.55,46,14l2.85-4.75a18,18,0,0,0-25.29.94L54.16,38.93a18,18,0,0,0,.22-24.36Z"/>
<polygon class="cls-2" points="27.84 46.36 24.08 50.38 9.06 44.6 12.78 40.63 27.84 46.36"/>
<polygon class="cls-2" points="35.64 38.05 31.92 42.02 16.68 36.48 20.23 32.69 35.64 38.05"/>
</svg>

After

Width:  |  Height:  |  Size: 977 B

View File

@ -0,0 +1,29 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #caeaf1;
}
.cls-2 {
fill: #d6e3ff;
}
.cls-3 {
fill: #b387ff;
}
.cls-4 {
fill: #ebdcff;
}
</style>
</defs>
<g>
<path class="cls-1" d="M23,26S10,44,10,51a7,7,0,0,0,7,7H47a7,7,0,0,0,7-7c0-7-13-25-13-25"/>
<path class="cls-2" d="M41,26V11h.5a2.5,2.5,0,0,0,0-5h-19a2.5,2.5,0,0,0,0,5H23V26S10,44,10,51a7,7,0,0,0,7,7H47a7,7,0,0,0,7-7C54,44,41,26,41,26Z"/>
<path class="cls-3" d="M43.81,34c3.4,5.08,8.07,12.7,8.07,16.31A5.69,5.69,0,0,1,46.19,56H17.81a5.68,5.68,0,0,1-5.68-5.69C12.13,46.7,20,34,20.19,34,29,34,29,37,36,37,40,37,43.81,34,43.81,34Z"/>
<circle class="cls-4" cx="24" cy="50" r="2"/>
<circle class="cls-4" cx="28.5" cy="45.5" r="1.5"/>
<circle class="cls-4" cx="23.5" cy="38.5" r="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 950 B

View File

@ -0,0 +1,24 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #fdc7c7;
}
.cls-2 {
fill: #fb7373;
}
</style>
</defs>
<g>
<g>
<path class="cls-1" d="M34.82,38.32,49.57,23.37a11.26,11.26,0,0,0-.1-15.92h0a11.26,11.26,0,0,0-15.92.1l-14.76,15Z"/>
<path class="cls-2" d="M20.37,20.91,7.2,34.26a11.26,11.26,0,0,0,.1,15.92h0a11.26,11.26,0,0,0,15.92-.11L36.4,36.72Z"/>
</g>
<g>
<path class="cls-2" d="M59.88,48.86a11,11,0,0,1-22,.14Z"/>
<path class="cls-2" d="M37.88,48.14a11,11,0,0,1,22-.14Z"/>
<polygon class="cls-1" points="60 48.82 38.01 49 38 47.18 59.99 47 60 48.82"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 747 B

View File

@ -0,0 +1,17 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #fb7373;
}
.cls-2 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="M52.23,60H11.77a6.9,6.9,0,0,1-6.59-8.07l4-27A6.78,6.78,0,0,1,15.72,19H48.28a6.78,6.78,0,0,1,6.59,5.94l4,27A6.9,6.9,0,0,1,52.23,60Z"/>
<rect class="cls-2" x="28" y="28" width="9" height="24"/>
<rect class="cls-2" x="28" y="27.5" width="9" height="25" transform="translate(72.5 7.5) rotate(90)"/>
<path class="cls-1" d="M46.22,22.22H18.78V13a8.68,8.68,0,0,1,8.67-8.67h10.1A8.68,8.68,0,0,1,46.22,13Zm-24-3.44H42.78V13a5.24,5.24,0,0,0-5.23-5.23H27.45A5.24,5.24,0,0,0,22.22,13Z"/>
</svg>

After

Width:  |  Height:  |  Size: 742 B

View File

@ -0,0 +1,27 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #1eb37a;
}
.cls-2 {
fill: #fff;
}
.cls-3 {
fill: #34b4ff;
}
</style>
</defs>
<circle class="cls-1" cx="18.5" cy="19.5" r="14.5"/>
<g>
<path class="cls-2" d="M28.4,27a3,3,0,0,1-.62,1.8A3.33,3.33,0,0,1,26.17,30l-6.08,2a3,3,0,0,1-1.88,0l-6.08-2A3.16,3.16,0,0,1,9.9,27a4.24,4.24,0,0,1,1.39-3.12,4.9,4.9,0,0,1,3.35-1.29h.49a6.34,6.34,0,0,0,2.29,1.15,6.57,6.57,0,0,0,1.73.23,6.54,6.54,0,0,0,4-1.38h.48A4.59,4.59,0,0,1,28.4,27Z"/>
<path class="cls-2" d="M25.55,14.24V17a6.17,6.17,0,0,1-2.38,4.86A6.38,6.38,0,0,1,20.87,23a6.06,6.06,0,0,1-1.72.23A6.18,6.18,0,0,1,17.42,23a6.34,6.34,0,0,1-2.29-1.15A6.18,6.18,0,0,1,12.74,17V14.24a1.64,1.64,0,0,1,0-.22,6.16,6.16,0,0,1,.54-2.32A6.47,6.47,0,0,1,25,11.7,6,6,0,0,1,25.54,14C25.54,14.09,25.55,14.17,25.55,14.24Z"/>
</g>
<circle class="cls-3" cx="39.25" cy="39.25" r="20.25"/>
<g>
<path class="cls-2" d="M52.2,50.77a4.22,4.22,0,0,1-.87,2.54,4.73,4.73,0,0,1-2.27,1.62l-8.57,2.86a4.25,4.25,0,0,1-2.64,0l-8.57-2.86a4.45,4.45,0,0,1-3.14-4.16,6,6,0,0,1,1.95-4.39,6.9,6.9,0,0,1,4.73-1.82h.69a9.2,9.2,0,0,0,11.32,0h.69A6.46,6.46,0,0,1,52.2,50.77Z"/>
<path class="cls-2" d="M48.19,32.8v3.91a8.69,8.69,0,0,1-3.36,6.85,9,9,0,0,1-3.23,1.62,9.2,9.2,0,0,1-8.09-1.62,8.7,8.7,0,0,1-3.37-6.85V32.8c0-.11,0-.22,0-.32a8.57,8.57,0,0,1,.77-3.26,9.11,9.11,0,0,1,16.47,0,8.39,8.39,0,0,1,.77,3.26C48.18,32.58,48.19,32.69,48.19,32.8Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,24 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #d1d6dd;
}
.cls-2 {
fill: #00a6f7;
}
.cls-3 {
fill: #8e9fba;
}
</style>
</defs>
<g>
<path class="cls-1" d="M51.55,6.21a8.61,8.61,0,0,0-1.93-.52c-2.73-.35-1.59.2-2.24-.06A.32.32,0,0,0,47,5.8a.24.24,0,0,0,0,.15c.07,1.15.17,2.07.38,2,.48-.26,1.41,0,1.91-.06,2.42-.1,3.2,1.15,2.83,3.54a37.75,37.75,0,0,1-4.8,13.35,32.45,32.45,0,0,1-3.89,5.56c-1.85,2-3.17,1.93-5.1.11l-.15-.15c-4.88-5-7.61-11.86-8.79-18.64-.43-2.45.39-3.4,2.88-3.62a2.34,2.34,0,0,1,.95.14c.06-.78.08-1.57.07-2.36-.68.28-1.38,0-2.13.2-3.42.76-4.54,2.61-4,6.06.91,5.85,3.77,11,6.13,16.24a10.92,10.92,0,0,0,5,5.15,2.12,2.12,0,0,1,.43.28,5.33,5.33,0,0,1,4.12.45,2.83,2.83,0,0,1,1.09-1,12.79,12.79,0,0,0,4.88-5.52,71.52,71.52,0,0,0,2.93-6.95A54,54,0,0,0,53.51,15a24.19,24.19,0,0,0,.76-4.54A4.27,4.27,0,0,0,51.55,6.21Z"/>
<path class="cls-2" d="M53,18.25a1.66,1.66,0,0,0-3.21-.69c-2.48,6.76-6.74,14.06-9.3,14.06-2.23,0-6.61-7.29-9.3-14.1A1.71,1.71,0,0,0,28,18.78c1.35,3.41,5.78,13.74,10.73,15.86-1.05,4.55.64,7.32,2.14,9.77C42,46.27,43,47.87,43,50.28c-.13,5.23-5.43,6.3-13.35,6.3-4.14,0-9.26-1.36-11.34-4.4C17.11,50.51,17,48.52,18,46.1A12.59,12.59,0,0,1,21.06,42C23.5,39.48,26.53,36.41,23,30.5A1.71,1.71,0,0,0,20,32.27c2.21,3.64,1,4.85-1.39,7.27a15.62,15.62,0,0,0-3.87,5.32c-1.68,4.37-.56,7.44.68,9.25,3,4.35,9.49,5.89,14.16,5.89,4.95,0,16.53,0,16.77-9.63C46.45,47,45,44.65,43.8,42.63c-1.43-2.33-2.56-4.16-1.65-7.59a2,2,0,0,0,.06-.34c5.46-2.1,9.89-13.49,10.79-16Z"/>
<path class="cls-3" d="M26.49,25.64a6.42,6.42,0,1,1-6.09-4.35h0A6.34,6.34,0,0,1,26.49,25.64Z"/>
<path class="cls-3" d="M36.21,7a2.6,2.6,0,0,1-2.6,2.6h0c-1,0-.91-1.16-.91-2.6s-.24-2.6.91-2.6A2.61,2.61,0,0,1,36.21,7Z"/>
<path class="cls-3" d="M45,6.56A2.56,2.56,0,0,1,47.6,4h0c1,0,.89,1.18.87,2.61,0,1.67.29,3-1.62,2.48A2.54,2.54,0,0,1,45,6.57Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,33 @@
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<defs>
<style>
.cls-1 {
fill: #fb7373;
}
.cls-2 {
fill: #ffb1c0;
}
.cls-3 {
fill: #fff;
stroke: #ffb1c0;
stroke-miterlimit: 10;
stroke-width: 2px;
}
.cls-4 {
fill: #fedada;
opacity: 0.25;
}
</style>
</defs>
<g>
<rect class="cls-1" x="6" y="6" width="52" height="52" rx="7.58"/>
<path class="cls-2" d="M53.41,19.59a2,2,0,0,0-2.82,0L32,38.17,19.41,25.59a2,2,0,0,0-2.82,0L6,36.17v5.66l12-12L30.59,42.41a2,2,0,0,0,2.82,0l20-20A2,2,0,0,0,53.41,19.59Z"/>
<circle class="cls-3" cx="18" cy="28" r="4"/>
<circle class="cls-3" cx="32" cy="41" r="4"/>
<circle class="cls-3" cx="52.5" cy="20.5" r="4"/>
<rect class="cls-4" x="6" y="24" width="52" height="18"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 910 B