fix(player): change card colors and borders, fix icons
This commit is contained in:
sylenien
Delirium
parent
73c45dae3e
commit
3f14d4b766
10 changed files with 121 additions and 99 deletions
|
|
@ -1,21 +1,21 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useStore } from "App/mstore";
|
||||
import { Button, PageTitle, Loader } from "UI";
|
||||
import { withSiteId } from "App/routes";
|
||||
import withModal from "App/components/Modal/withModal";
|
||||
import DashboardWidgetGrid from "../DashboardWidgetGrid";
|
||||
import { confirm } from "UI";
|
||||
import { withRouter, RouteComponentProps } from "react-router-dom";
|
||||
import { useModal } from "App/components/Modal";
|
||||
import DashboardModal from "../DashboardModal";
|
||||
import DashboardEditModal from "../DashboardEditModal";
|
||||
import AlertFormModal from "App/components/Alerts/AlertFormModal";
|
||||
import withPageTitle from "HOCs/withPageTitle";
|
||||
import withReport from "App/components/hocs/withReport";
|
||||
import DashboardOptions from "../DashboardOptions";
|
||||
import SelectDateRange from "Shared/SelectDateRange";
|
||||
import { Tooltip } from "react-tippy";
|
||||
import React, { useEffect } from 'react';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { Button, PageTitle, Loader } from 'UI';
|
||||
import { withSiteId } from 'App/routes';
|
||||
import withModal from 'App/components/Modal/withModal';
|
||||
import DashboardWidgetGrid from '../DashboardWidgetGrid';
|
||||
import { confirm } from 'UI';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import DashboardModal from '../DashboardModal';
|
||||
import DashboardEditModal from '../DashboardEditModal';
|
||||
import AlertFormModal from 'App/components/Alerts/AlertFormModal';
|
||||
import withPageTitle from 'HOCs/withPageTitle';
|
||||
import withReport from 'App/components/hocs/withReport';
|
||||
import DashboardOptions from '../DashboardOptions';
|
||||
import SelectDateRange from 'Shared/SelectDateRange';
|
||||
import { Tooltip } from 'react-tippy';
|
||||
import Breadcrumb from 'Shared/Breadcrumb';
|
||||
|
||||
interface IProps {
|
||||
|
|
@ -42,18 +42,18 @@ function DashboardView(props: Props) {
|
|||
const queryParams = new URLSearchParams(props.location.search);
|
||||
|
||||
const trimQuery = () => {
|
||||
if (!queryParams.has("modal")) return;
|
||||
queryParams.delete("modal");
|
||||
if (!queryParams.has('modal')) return;
|
||||
queryParams.delete('modal');
|
||||
props.history.replace({
|
||||
search: queryParams.toString(),
|
||||
});
|
||||
};
|
||||
const pushQuery = () => {
|
||||
if (!queryParams.has("modal")) props.history.push("?modal=addMetric");
|
||||
if (!queryParams.has('modal')) props.history.push('?modal=addMetric');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (queryParams.has("modal")) {
|
||||
if (queryParams.has('modal')) {
|
||||
onAddWidgets();
|
||||
trimQuery();
|
||||
}
|
||||
|
|
@ -62,9 +62,9 @@ function DashboardView(props: Props) {
|
|||
useEffect(() => {
|
||||
const isExists = dashboardStore.getDashboardById(dashboardId);
|
||||
if (!isExists) {
|
||||
props.history.push(withSiteId(`/dashboard`, siteId))
|
||||
props.history.push(withSiteId(`/dashboard`, siteId));
|
||||
}
|
||||
}, [dashboardId])
|
||||
}, [dashboardId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!dashboard || !dashboard.dashboardId) return;
|
||||
|
|
@ -73,14 +73,7 @@ function DashboardView(props: Props) {
|
|||
|
||||
const onAddWidgets = () => {
|
||||
dashboardStore.initDashboard(dashboard);
|
||||
showModal(
|
||||
<DashboardModal
|
||||
siteId={siteId}
|
||||
onMetricAdd={pushQuery}
|
||||
dashboardId={dashboardId}
|
||||
/>,
|
||||
{ right: true }
|
||||
);
|
||||
showModal(<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId} />, { right: true });
|
||||
};
|
||||
|
||||
const onEdit = (isTitle: boolean) => {
|
||||
|
|
@ -92,8 +85,8 @@ function DashboardView(props: Props) {
|
|||
const onDelete = async () => {
|
||||
if (
|
||||
await confirm({
|
||||
header: "Confirm",
|
||||
confirmButton: "Yes, delete",
|
||||
header: 'Confirm',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this Dashboard?`,
|
||||
})
|
||||
) {
|
||||
|
|
@ -107,60 +100,41 @@ function DashboardView(props: Props) {
|
|||
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<div style={{ maxWidth: "1300px", margin: "auto" }}>
|
||||
<DashboardEditModal
|
||||
show={showEditModal}
|
||||
closeHandler={() => setShowEditModal(false)}
|
||||
focusTitle={focusTitle}
|
||||
/>
|
||||
<div style={{ maxWidth: '1300px', margin: 'auto' }}>
|
||||
<DashboardEditModal show={showEditModal} closeHandler={() => setShowEditModal(false)} focusTitle={focusTitle} />
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
label: 'Dashboards',
|
||||
to: withSiteId('/dashboard', siteId),
|
||||
},
|
||||
{ label: dashboard && dashboard.name || '' },
|
||||
{ label: (dashboard && dashboard.name) || '' },
|
||||
]}
|
||||
/>
|
||||
<div className="flex items-center mb-4 justify-between">
|
||||
<div className="flex items-center" style={{ flex: 3 }}>
|
||||
<PageTitle
|
||||
// @ts-ignore
|
||||
title={
|
||||
<Tooltip
|
||||
delay={100}
|
||||
arrow
|
||||
title="Double click to rename"
|
||||
>
|
||||
// @ts-ignore
|
||||
<Tooltip delay={100} arrow title="Double click to rename">
|
||||
{dashboard?.name}
|
||||
</Tooltip>
|
||||
}
|
||||
onDoubleClick={() => onEdit(true)}
|
||||
className="mr-3 select-none hover:border-dotted hover:border-b border-gray-medium cursor-pointer"
|
||||
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
|
||||
actionButton={
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onAddWidgets}
|
||||
>
|
||||
<Button variant="primary" onClick={onAddWidgets}>
|
||||
Add Metric
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{ flex: 1, justifyContent: "end" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center flex-shrink-0 justify-end"
|
||||
style={{ width: "300px" }}
|
||||
>
|
||||
<div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
|
||||
<div className="flex items-center flex-shrink-0 justify-end" style={{ width: '300px' }}>
|
||||
<SelectDateRange
|
||||
style={{ width: "300px" }}
|
||||
style={{ width: '300px' }}
|
||||
period={period}
|
||||
onChange={(period: any) =>
|
||||
dashboardStore.setPeriod(period)
|
||||
}
|
||||
onChange={(period: any) => dashboardStore.setPeriod(period)}
|
||||
right={true}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -176,30 +150,21 @@ function DashboardView(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2
|
||||
className="my-4 w-fit font-normal color-gray-dark border-dashed border-b cursor-pointer border-b-gray-medium"
|
||||
onDoubleClick={() => onEdit(false)}
|
||||
>
|
||||
{dashboard?.description || "Describe the purpose of this dashboard"}
|
||||
</h2>
|
||||
{/* @ts-ignore */}
|
||||
<Tooltip delay={100} arrow title="Double click to rename" className='w-fit !block'>
|
||||
<h2
|
||||
className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
|
||||
onDoubleClick={() => onEdit(false)}
|
||||
>
|
||||
{dashboard?.description || 'Describe the purpose of this dashboard'}
|
||||
</h2>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<DashboardWidgetGrid
|
||||
siteId={siteId}
|
||||
dashboardId={dashboardId}
|
||||
onEditHandler={onAddWidgets}
|
||||
id="report"
|
||||
/>
|
||||
<AlertFormModal
|
||||
showModal={showAlertModal}
|
||||
onClose={() =>
|
||||
dashboardStore.updateKey("showAlertModal", false)
|
||||
}
|
||||
/>
|
||||
<DashboardWidgetGrid siteId={siteId} dashboardId={dashboardId} onEditHandler={onAddWidgets} id="report" />
|
||||
<AlertFormModal showModal={showAlertModal} onClose={() => dashboardStore.updateKey('showAlertModal', false)} />
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
}
|
||||
|
||||
export default withPageTitle("Dashboards - OpenReplay")(
|
||||
withReport(withRouter(withModal(observer(DashboardView))))
|
||||
);
|
||||
export default withPageTitle('Dashboards - OpenReplay')(withReport(withRouter(withModal(observer(DashboardView)))));
|
||||
|
|
|
|||
|
|
@ -5,25 +5,41 @@ import { useModal } from 'App/components/Modal';
|
|||
import { useStore } from 'App/mstore';
|
||||
import AddMetric from './AddMetric';
|
||||
import AddPredefinedMetric from './AddPredefinedMetric';
|
||||
import cn from 'classnames';
|
||||
|
||||
interface AddMetricButtonProps {
|
||||
iconName: string;
|
||||
title: string;
|
||||
description: string;
|
||||
isPremade?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function AddMetricButton({ iconName, title, description, onClick }: AddMetricButtonProps) {
|
||||
function AddMetricButton({ iconName, title, description, onClick, isPremade }: AddMetricButtonProps) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="px-4 py-8 flex items-center flex-col bg-tealx-lightest hover:bg-active-blue group border-teal-light border cursor-pointer"
|
||||
className={cn(
|
||||
'px-4 py-8 flex items-center flex-col hover:bg-gray-lightest group rounded border cursor-pointer',
|
||||
isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background'
|
||||
)}
|
||||
style={{ borderColor: 'rgb(238, 238, 238)' }}
|
||||
>
|
||||
<div className="p-4 mb-2 bg-gray-light rounded-full group-hover:bg-teal-light">
|
||||
<Icon name={iconName} size={26} />
|
||||
<div
|
||||
className={cn(
|
||||
'p-6 my-3 rounded-full group-hover:bg-gray-light',
|
||||
isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
name={iconName}
|
||||
size={26}
|
||||
className="group-hover:fill-gray-medium"
|
||||
style={{ fill: isPremade ? '#3EAAAF' : 'rgba(63, 81, 181, 0.5)' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="font-bold mb-2">{title}</div>
|
||||
<div className="text-disabled-test w-2/3">{description}</div>
|
||||
<div className="font-bold mb-2 text-figmaColors-text-primary">{title}</div>
|
||||
<div className="text-disabled-test w-2/3 text-center text-figmaColors-text-primary">{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -63,17 +79,18 @@ function AddMetricContainer({ siteId }: any) {
|
|||
);
|
||||
};
|
||||
return (
|
||||
<div className="bg-white rounded p-8 grid grid-cols-2 gap-4 w-4/5 m-auto">
|
||||
<div style={{ borderColor: 'rgb(238, 238, 238)', height: 300 }} className="bg-white border border-dashed rounded p-8 grid grid-cols-2 gap-8">
|
||||
<AddMetricButton
|
||||
title="+ Add custom Metric"
|
||||
description="Metrics that are manually created by you or your team"
|
||||
iconName="bar-chart-line"
|
||||
iconName="bar-pencil"
|
||||
onClick={onAddCustomMetrics}
|
||||
isPremade
|
||||
/>
|
||||
<AddMetricButton
|
||||
title="+ Add Ready-Made Metric"
|
||||
description="Curated metrics predfined by OpenReplay."
|
||||
iconName="bar-chart-line"
|
||||
iconName="grid-check"
|
||||
onClick={onAddPredefinedMetrics}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ function DashboardWidgetGrid(props: Props) {
|
|||
<NoContent
|
||||
show={list.length === 0}
|
||||
icon="no-metrics-chart"
|
||||
title="Build your dashboard"
|
||||
title={<span className="text-2xl capitalize-first text-figmaColors-text-primary">Build your dashboard</span>}
|
||||
subtext={
|
||||
<AddMetricContainer siteId={siteId} />
|
||||
<div className="w-4/5 m-auto"><AddMetricContainer siteId={siteId} /></div>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
|
||||
|
|
@ -41,6 +41,7 @@ function DashboardWidgetGrid(props: Props) {
|
|||
isWidget={true}
|
||||
/>
|
||||
))}
|
||||
<div className="col-span-2"><AddMetricContainer siteId={siteId} /></div>
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,12 @@ function WidgetName(props: Props) {
|
|||
<Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
|
||||
<div
|
||||
onDoubleClick={() => setEditing(true)}
|
||||
className={cn("text-2xl h-8 flex items-center border-transparent", canEdit && 'cursor-pointer select-none hover:border-dotted hover:border-b border-gray-medium')}
|
||||
className={
|
||||
cn(
|
||||
"text-2xl h-8 flex items-center border-transparent",
|
||||
canEdit && 'cursor-pointer select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium'
|
||||
)
|
||||
}
|
||||
>
|
||||
{ name }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ const SVG = (props: Props) => {
|
|||
case 'avatar/icn_wild_bore': return <svg viewBox="0 0 100 100" width={ `${ width }px` } height={ `${ height }px` } ><path d="M92.9 46.6c-1.5-.5-3.1.3-3.6 1.8-.5 1.6-1.5 2.6-3.1 3.1l-1.4-1.9-.8-7.4c-.4-3.8-2.9-7.1-6.3-8.6l-2.4-1.1c-1.2-2.7-3.1-7.1-5.9-8.2-2.7-1.1-4.9.8-6.3 3.4-4.8-1.1-9.8-.9-14.6.7-4.2 1.4-5.9 1.1-17.9 1.1-6.2 0-11.9 3.4-15 8.7-6.7 4-10.1 9.4-10.2 9.6-1.2 1.9.2 4.3 2.4 4.3.9 0 1.8-.5 2.4-1.3 0 0 1.1-1.7 3.2-3.8 0 2.2.4 3.5 1.2 6.8l-5.9 5.9c-.5.5-.8 1.2-.8 2v11.2c0 1.6 1.3 2.8 2.8 2.8h2.8c1.6 0 2.8-1.3 2.8-2.8s-1.3-2.8-2.8-2.8v-1.5c11.4-3 12.5-3.4 14.4-4.6 0 0-.1-.2 3.4 5.1l-.7 1.4c-.7 1.4-.1 3.1 1.3 3.8 1.4.7 3.1.1 3.8-1.3l1.4-2.8c.5-.9.4-2-.2-2.8L32 60.1c.2-.2.3-.5.5-.7 4.9 4 11 6.6 17.3 5.9l-1 2.6c-.3.7-.2.7-.2 5.3 0 1.6 1.3 2.8 2.8 2.8h2.8c1.6 0 2.8-1.3 2.8-2.8s-1.3-2.8-2.8-2.8v-.9l2-5c.2.1-.8-.6 2.6 2l2.5 7.6c.4 1.1 1.5 1.9 2.7 1.9h1.4c1.6 0 2.8-1.3 2.8-2.8 0-1.3-.9-2.4-2.2-2.7l-2-6.1v-1.6c.8.6 1.6 1.1 2.5 1.6 3.3 1.6 4.5 2.4 6.7 2.9 2.7.6 3.6.3 5.4.6 8 1.3 7.5 1.3 7.8 1.3 1 0 2-.6 2.5-1.6l2.8-5.6c.2-.4.4-1.2.2-2-.2-.6-.2-.6-2.3-3.5 2-1 4-2.9 5.1-6 .5-1.8-.3-3.4-1.8-3.9z"/></svg>;
|
||||
case 'ban': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zM103.265 408.735c-80.622-80.622-84.149-208.957-10.9-293.743l304.644 304.643c-84.804 73.264-213.138 69.706-293.744-10.9zm316.37-11.727L114.992 92.365c84.804-73.263 213.137-69.705 293.743 10.9 80.622 80.621 84.149 208.957 10.9 293.743z"/></svg>;
|
||||
case 'bar-chart-line': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/></svg>;
|
||||
case 'bar-pencil': return <svg viewBox="0 0 59 66" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M40.27 15.736a3.59 3.59 0 0 1 3.591-3.59h7.18a3.59 3.59 0 0 1 3.591 3.59V58.82h1.795a1.796 1.796 0 0 1 0 3.59H2.573a1.795 1.795 0 1 1 0-3.59h1.795V48.05a3.59 3.59 0 0 1 3.59-3.59h7.18a3.59 3.59 0 0 1 3.591 3.59v10.77h3.59V33.687a3.59 3.59 0 0 1 3.59-3.59h7.181a3.59 3.59 0 0 1 3.59 3.59V58.82h3.59V15.736Zm3.591 43.083h7.18V15.736h-7.18V58.82Zm-10.77 0V33.687H25.91V58.82h7.18Zm-17.952 0V48.05h-7.18v10.77h7.18Z"/></g><g clipPath="url(#b)"><path d="M28.613.335a1.145 1.145 0 0 1 1.622 0L37.11 7.21a1.146 1.146 0 0 1 0 1.622L14.193 31.749c-.11.109-.24.195-.385.252L2.35 36.584a1.147 1.147 0 0 1-1.49-1.49l4.584-11.458c.057-.144.143-.275.252-.385L28.613.335ZM26.46 5.729l5.254 5.255 2.963-2.963-5.254-5.255-2.963 2.963Zm3.634 6.875L24.84 7.35 9.945 22.245v.672h1.145a1.146 1.146 0 0 1 1.146 1.145v1.146h1.146a1.146 1.146 0 0 1 1.146 1.146V27.5h.671l14.896-14.896ZM7.726 24.464l-.243.242-3.501 8.757 8.756-3.502.243-.243a1.146 1.146 0 0 1-.745-1.072V27.5H11.09a1.146 1.146 0 0 1-1.145-1.146v-1.146H8.799a1.146 1.146 0 0 1-1.073-.744Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.778 8.556)" d="M0 0h57.444v57.444H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(.778)" d="M0 0h36.667v36.667H0z"/></clipPath></defs></svg>;
|
||||
case 'bell-plus': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M224 480a32 32 0 0 1-32-32h-32a64 64 0 1 0 128 0h-32a32 32 0 0 1-32 32zm209.37-145.19c-28-26.62-49.34-54.48-49.34-148.9 0-79.6-63.37-144.5-144-152.36V16a16 16 0 0 0-32 0v17.56C127.35 41.41 64 106.31 64 185.91c0 94.4-21.41 122.28-49.35 148.9a46.47 46.47 0 0 0-11.27 51.24A47.68 47.68 0 0 0 48 416h352a47.67 47.67 0 0 0 44.62-30 46.47 46.47 0 0 0-11.25-51.19zM400 384H48c-14.22 0-21.35-16.47-11.32-26C71.54 324.8 96 287.66 96 185.91 96 118.53 153.22 64 224 64s128 54.52 128 121.91c0 101.34 24.22 138.68 59.28 172.07C421.37 367.56 414.16 384 400 384zM296 224h-56v-56a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v56h-56a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h56v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8v-56h56a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"/></svg>;
|
||||
case 'bell': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/></svg>;
|
||||
case 'binoculars': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"/></svg>;
|
||||
|
|
@ -221,6 +222,7 @@ const SVG = (props: Props) => {
|
|||
case 'github': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>;
|
||||
case 'graph-up-arrow': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/></svg>;
|
||||
case 'grid-3x3': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5V5h4V1H1.5zM5 6H1v4h4V6zm1 4h4V6H6v4zm-1 1H1v3.5a.5.5 0 0 0 .5.5H5v-4zm1 0v4h4v-4H6zm5 0v4h3.5a.5.5 0 0 0 .5-.5V11h-4zm0-1h4V6h-4v4zm0-5h4V1.5a.5.5 0 0 0-.5-.5H11v4zm-1 0V1H6v4h4z"/></svg>;
|
||||
case 'grid-check': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6.5 32.5h9.75a3.25 3.25 0 0 1 3.25 3.25v9.75a3.25 3.25 0 0 1-3.25 3.25H6.5a3.25 3.25 0 0 1-3.25-3.25v-9.75A3.25 3.25 0 0 1 6.5 32.5ZM35.75 3.25h9.75a3.25 3.25 0 0 1 3.25 3.25v9.75a3.25 3.25 0 0 1-3.25 3.25h-9.75a3.25 3.25 0 0 1-3.25-3.25V6.5a3.25 3.25 0 0 1 3.25-3.25Zm0 29.25a3.25 3.25 0 0 0-3.25 3.25v9.75a3.25 3.25 0 0 0 3.25 3.25h9.75a3.25 3.25 0 0 0 3.25-3.25v-9.75a3.25 3.25 0 0 0-3.25-3.25h-9.75Zm0-32.5a6.5 6.5 0 0 0-6.5 6.5v9.75a6.5 6.5 0 0 0 6.5 6.5h9.75a6.5 6.5 0 0 0 6.5-6.5V6.5A6.5 6.5 0 0 0 45.5 0h-9.75ZM6.5 29.25a6.5 6.5 0 0 0-6.5 6.5v9.75A6.5 6.5 0 0 0 6.5 52h9.75a6.5 6.5 0 0 0 6.5-6.5v-9.75a6.5 6.5 0 0 0-6.5-6.5H6.5Zm22.75 6.5a6.5 6.5 0 0 1 6.5-6.5h9.75a6.5 6.5 0 0 1 6.5 6.5v9.75a6.5 6.5 0 0 1-6.5 6.5h-9.75a6.5 6.5 0 0 1-6.5-6.5v-9.75ZM0 6.5A6.5 6.5 0 0 1 6.5 0h9.75a6.5 6.5 0 0 1 6.5 6.5v9.75a6.5 6.5 0 0 1-6.5 6.5H6.5a6.5 6.5 0 0 1-6.5-6.5V6.5Zm17.4 2.775a1.627 1.627 0 0 0-2.3-2.3l-5.35 5.352-2.1-2.102a1.627 1.627 0 1 0-2.3 2.3l3.25 3.25a1.625 1.625 0 0 0 2.3 0l6.5-6.5Z"/></svg>;
|
||||
case 'grip-horizontal': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M424 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zM264 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zM104 96H24c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96H32v-64h64v64zm328 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zm-152-96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zm-152-96H24c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96H32v-64h64v64z"/></svg>;
|
||||
case 'hash': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"/></svg>;
|
||||
case 'hdd-stack': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h12zM2 9a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H2z"/><path d="M5 11.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM14 3a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/><path d="M5 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export interface IDashboard {
|
|||
export default class Dashboard implements IDashboard {
|
||||
public static get ID_KEY():string { return "dashboardId" }
|
||||
dashboardId: any = undefined
|
||||
name: string = "New Dashboard"
|
||||
name: string = "Untitled Dashboard"
|
||||
description: string = ""
|
||||
isPublic: boolean = true
|
||||
widgets: IWidget[] = []
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default class Widget implements IWidget {
|
|||
public static get ID_KEY():string { return "metricId" }
|
||||
metricId: any = undefined
|
||||
widgetId: any = undefined
|
||||
name: string = "New Metric"
|
||||
name: string = "Untitled Metric"
|
||||
// metricType: string = "timeseries"
|
||||
metricType: string = "timeseries"
|
||||
metricOf: string = "sessionCount"
|
||||
|
|
|
|||
16
frontend/app/svg/icons/bar-pencil.svg
Normal file
16
frontend/app/svg/icons/bar-pencil.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<svg viewBox="0 0 59 66" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1102_8386)">
|
||||
<path d="M40.2709 15.7361C40.2709 14.7839 40.6491 13.8707 41.3225 13.1974C41.9958 12.5241 42.909 12.1458 43.8612 12.1458H51.0417C51.9939 12.1458 52.9071 12.5241 53.5804 13.1974C54.2537 13.8707 54.632 14.7839 54.632 15.7361V58.8194H56.4271C56.9032 58.8194 57.3598 59.0086 57.6965 59.3452C58.0331 59.6819 58.2223 60.1385 58.2223 60.6146C58.2223 61.0907 58.0331 61.5473 57.6965 61.8839C57.3598 62.2206 56.9032 62.4097 56.4271 62.4097H2.57297C2.09687 62.4097 1.64027 62.2206 1.30362 61.8839C0.966962 61.5473 0.777832 61.0907 0.777832 60.6146C0.777832 60.1385 0.966962 59.6819 1.30362 59.3452C1.64027 59.0086 2.09687 58.8194 2.57297 58.8194H4.36811V48.0486C4.36811 47.0964 4.74637 46.1832 5.41968 45.5099C6.09299 44.8366 7.00619 44.4583 7.95839 44.4583H15.1389C16.0911 44.4583 17.0043 44.8366 17.6777 45.5099C18.351 46.1832 18.7292 47.0964 18.7292 48.0486V58.8194H22.3195V33.6875C22.3195 32.7353 22.6978 31.8221 23.3711 31.1488C24.0444 30.4755 24.9576 30.0972 25.9098 30.0972H33.0903C34.0425 30.0972 34.9557 30.4755 35.629 31.1488C36.3023 31.8221 36.6806 32.7353 36.6806 33.6875V58.8194H40.2709V15.7361ZM43.8612 58.8194H51.0417V15.7361H43.8612V58.8194ZM33.0903 58.8194V33.6875H25.9098V58.8194H33.0903ZM15.1389 58.8194V48.0486H7.95839V58.8194H15.1389Z" />
|
||||
</g>
|
||||
<g clip-path="url(#clip1_1102_8386)">
|
||||
<path d="M28.6125 0.334511C28.7189 0.227803 28.8453 0.143142 28.9845 0.0853777C29.1238 0.0276129 29.273 -0.00212097 29.4237 -0.00212097C29.5744 -0.00212097 29.7237 0.0276129 29.8629 0.0853777C30.0021 0.143142 30.1285 0.227803 30.235 0.334511L37.11 7.20951C37.2167 7.31595 37.3013 7.44239 37.3591 7.5816C37.4169 7.72081 37.4466 7.87004 37.4466 8.02076C37.4466 8.17148 37.4169 8.32071 37.3591 8.45992C37.3013 8.59913 37.2167 8.72557 37.11 8.83201L14.1933 31.7487C14.0833 31.8579 13.9524 31.9436 13.8083 32.0008L2.34996 36.5841C2.14173 36.6674 1.91362 36.6878 1.6939 36.6428C1.47418 36.5977 1.27253 36.4891 1.11393 36.3305C0.955329 36.1719 0.846765 35.9703 0.801694 35.7506C0.756623 35.5308 0.777026 35.3027 0.860376 35.0945L5.44371 23.6362C5.50084 23.4921 5.58659 23.3611 5.69579 23.2512L28.6125 0.334511ZM26.4606 5.72909L31.7154 10.9839L34.6785 8.02076L29.4237 2.76597L26.4606 5.72909ZM30.0952 12.6041L24.8404 7.3493L9.94454 22.2451V22.9166H11.0904C11.3943 22.9166 11.6857 23.0373 11.9006 23.2522C12.1155 23.4671 12.2362 23.7585 12.2362 24.0624V25.2083H13.382C13.6859 25.2083 13.9774 25.329 14.1923 25.5439C14.4072 25.7587 14.5279 26.0502 14.5279 26.3541V27.4999H15.1993L30.0952 12.6041ZM7.72621 24.4635L7.48329 24.7064L3.98163 33.4628L12.7381 29.9612L12.981 29.7183C12.7624 29.6366 12.574 29.4901 12.4409 29.2985C12.3078 29.1068 12.2364 28.8791 12.2362 28.6458V27.4999H11.0904C10.7865 27.4999 10.495 27.3792 10.2801 27.1643C10.0653 26.9494 9.94454 26.658 9.94454 26.3541V25.2083H8.79871C8.56537 25.2081 8.33765 25.1367 8.14599 25.0036C7.95433 24.8705 7.80788 24.682 7.72621 24.4635Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1102_8386">
|
||||
<rect width="57.4444" height="57.4444" fill="white" transform="translate(0.777832 8.55556)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1102_8386">
|
||||
<rect width="36.6667" height="36.6667" fill="white" transform="translate(0.777832)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
3
frontend/app/svg/icons/grid-check.svg
Normal file
3
frontend/app/svg/icons/grid-check.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.5 32.5H16.25C17.112 32.5 17.9386 32.8424 18.5481 33.4519C19.1576 34.0614 19.5 34.888 19.5 35.75V45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75H6.5C5.63805 48.75 4.8114 48.4076 4.2019 47.7981C3.59241 47.1886 3.25 46.362 3.25 45.5V35.75C3.25 34.888 3.59241 34.0614 4.2019 33.4519C4.8114 32.8424 5.63805 32.5 6.5 32.5ZM35.75 3.25H45.5C46.362 3.25 47.1886 3.59241 47.7981 4.2019C48.4076 4.8114 48.75 5.63805 48.75 6.5V16.25C48.75 17.112 48.4076 17.9386 47.7981 18.5481C47.1886 19.1576 46.362 19.5 45.5 19.5H35.75C34.888 19.5 34.0614 19.1576 33.4519 18.5481C32.8424 17.9386 32.5 17.112 32.5 16.25V6.5C32.5 5.63805 32.8424 4.8114 33.4519 4.2019C34.0614 3.59241 34.888 3.25 35.75 3.25ZM35.75 32.5C34.888 32.5 34.0614 32.8424 33.4519 33.4519C32.8424 34.0614 32.5 34.888 32.5 35.75V45.5C32.5 46.362 32.8424 47.1886 33.4519 47.7981C34.0614 48.4076 34.888 48.75 35.75 48.75H45.5C46.362 48.75 47.1886 48.4076 47.7981 47.7981C48.4076 47.1886 48.75 46.362 48.75 45.5V35.75C48.75 34.888 48.4076 34.0614 47.7981 33.4519C47.1886 32.8424 46.362 32.5 45.5 32.5H35.75ZM35.75 0C34.0261 0 32.3728 0.68482 31.1538 1.90381C29.9348 3.12279 29.25 4.77609 29.25 6.5V16.25C29.25 17.9739 29.9348 19.6272 31.1538 20.8462C32.3728 22.0652 34.0261 22.75 35.75 22.75H45.5C47.2239 22.75 48.8772 22.0652 50.0962 20.8462C51.3152 19.6272 52 17.9739 52 16.25V6.5C52 4.77609 51.3152 3.12279 50.0962 1.90381C48.8772 0.68482 47.2239 0 45.5 0L35.75 0ZM6.5 29.25C4.77609 29.25 3.12279 29.9348 1.90381 31.1538C0.68482 32.3728 0 34.0261 0 35.75L0 45.5C0 47.2239 0.68482 48.8772 1.90381 50.0962C3.12279 51.3152 4.77609 52 6.5 52H16.25C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5V35.75C22.75 34.0261 22.0652 32.3728 20.8462 31.1538C19.6272 29.9348 17.9739 29.25 16.25 29.25H6.5ZM29.25 35.75C29.25 34.0261 29.9348 32.3728 31.1538 31.1538C32.3728 29.9348 34.0261 29.25 35.75 29.25H45.5C47.2239 29.25 48.8772 29.9348 50.0962 31.1538C51.3152 32.3728 52 34.0261 52 35.75V45.5C52 47.2239 51.3152 48.8772 50.0962 50.0962C48.8772 51.3152 47.2239 52 45.5 52H35.75C34.0261 52 32.3728 51.3152 31.1538 50.0962C29.9348 48.8772 29.25 47.2239 29.25 45.5V35.75ZM0 6.5C0 4.77609 0.68482 3.12279 1.90381 1.90381C3.12279 0.68482 4.77609 0 6.5 0L16.25 0C17.9739 0 19.6272 0.68482 20.8462 1.90381C22.0652 3.12279 22.75 4.77609 22.75 6.5V16.25C22.75 17.9739 22.0652 19.6272 20.8462 20.8462C19.6272 22.0652 17.9739 22.75 16.25 22.75H6.5C4.77609 22.75 3.12279 22.0652 1.90381 20.8462C0.68482 19.6272 0 17.9739 0 16.25V6.5ZM17.4005 9.2755C17.5516 9.12441 17.6714 8.94505 17.7532 8.74765C17.835 8.55024 17.8771 8.33867 17.8771 8.125C17.8771 7.91133 17.835 7.69976 17.7532 7.50235C17.6714 7.30495 17.5516 7.12559 17.4005 6.9745C17.2494 6.82341 17.07 6.70357 16.8726 6.6218C16.6752 6.54003 16.4637 6.49795 16.25 6.49795C16.0363 6.49795 15.8248 6.54003 15.6274 6.6218C15.4299 6.70357 15.2506 6.82341 15.0995 6.9745L9.75 12.3272L7.6505 10.2245C7.49941 10.0734 7.32005 9.95357 7.12265 9.8718C6.92524 9.79003 6.71367 9.74795 6.5 9.74795C6.28633 9.74795 6.07476 9.79003 5.87735 9.8718C5.67995 9.95357 5.50059 10.0734 5.3495 10.2245C5.19841 10.3756 5.07857 10.555 4.9968 10.7524C4.91503 10.9498 4.87295 11.1613 4.87295 11.375C4.87295 11.5887 4.91503 11.8002 4.9968 11.9976C5.07857 12.195 5.19841 12.3744 5.3495 12.5255L8.5995 15.7755C8.75045 15.9268 8.92977 16.0469 9.12719 16.1288C9.32461 16.2107 9.53626 16.2529 9.75 16.2529C9.96374 16.2529 10.1754 16.2107 10.3728 16.1288C10.5702 16.0469 10.7496 15.9268 10.9005 15.7755L17.4005 9.2755Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -43,5 +43,18 @@ module.exports = {
|
|||
'gray-light-shade': '#EEEEEE',
|
||||
'primary': '#3490dc',
|
||||
'transparent': 'transparent',
|
||||
},
|
||||
|
||||
// actual theme colors - use this for new components
|
||||
figmaColors: {
|
||||
'accent-secondary': 'rgba(62, 170, 175, 1)',
|
||||
'main': 'rgba(57, 78, 255, 1)',
|
||||
'primary-outlined-hover-background': 'rgba(62, 170, 175, 0.08)',
|
||||
'primary-outlined-resting-border': 'rgba(62, 170, 175, 0.5)',
|
||||
'secondary-outlined-hover-background': 'rgba(63, 81, 181, 0.08)',
|
||||
'secondary-outlined-resting-border': 'rgba(63, 81, 181, 0.5)',
|
||||
'text-disabled': 'rgba(0,0,0, 0.38)',
|
||||
'text-primary': 'rgba(0,0,0, 0.87)',
|
||||
'outlined-border': 'rgba(0,0,0, 0.23)',
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue