jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): examples

Browse source
This commit is contained in:
Shekar Siri 2024-06-26 14:15:09 +02:00
parent 1fa9698ecd
commit 4abed73219
4 changed files with 54 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx
View file

@ -1,5 +1,6 @@
import ExCard from '../ExCard'
import React from 'react'
import CardSessionsByList from "Components/Dashboard/Widgets/CardSessionsByList";
function ByComponent({title, rows, lineWidth, onCard, type}: {
title: string
@ -13,6 +14,11 @@ function ByComponent({title, rows, lineWidth, onCard, type}: {
type: string
lineWidth: number
}) {
const _rows = rows.map((r) => ({
...r,
name: r.label,
sessionCount: r.value,
})).slice(0, 4)
return (
<ExCard
title={title}
@ -20,37 +26,39 @@ function ByComponent({title, rows, lineWidth, onCard, type}: {
type={type}
>
<div className={'flex gap-1 flex-col'}>
{rows.map((r) => (
<div
className={
'flex items-center gap-2 border-b border-dotted py-2 last:border-0 first:pt-0 last:pb-0'
}
>
<div>{r.icon}</div>
<div>{r.label}</div>
<div
style={{marginLeft: 'auto', marginRight: 20, display: 'flex'}}
>
<div
style={{
height: 2,
width: lineWidth * (0.01 * r.progress),
background: '#394EFF',
}}
className={'rounded-l'}
/>
<div
style={{
height: 2,
width: lineWidth - lineWidth * (0.01 * r.progress),
background: '#E2E4F6',
}}
className={'rounded-r'}
/>
</div>
<div className={'min-w-8'}>{r.value}</div>
</div>
))}
<CardSessionsByList list={_rows} selected={''} onClickHandler={() => null}/>
{/*{rows.map((r) => (*/}
{/* <div*/}
{/* className={*/}
{/* 'flex items-center gap-2 border-b border-dotted py-2 last:border-0 first:pt-0 last:pb-0'*/}
{/* }*/}
{/* >*/}
{/* <div>{r.icon}</div>*/}
{/* <div>{r.label}</div>*/}
{/* <div*/}
{/* style={{marginLeft: 'auto', marginRight: 20, display: 'flex'}}*/}
{/* >*/}
{/* <div*/}
{/* style={{*/}
{/* height: 2,*/}
{/* width: lineWidth * (0.01 * r.progress),*/}
{/* background: '#394EFF',*/}
{/* }}*/}
{/* className={'rounded-l'}*/}
{/* />*/}
{/* <div*/}
{/* style={{*/}
{/* height: 2,*/}
{/* width: lineWidth - lineWidth * (0.01 * r.progress),*/}
{/* background: '#E2E4F6',*/}
{/* }}*/}
{/* className={'rounded-r'}*/}
{/* />*/}
{/* </div>*/}
{/* <div className={'min-w-8'}>{r.value}</div>*/}
{/* </div>*/}
{/*))}*/}
</div>
</ExCard>
)

3
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
View file

@ -15,6 +15,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
isAddingFromLibrary = false,
}) => {
const [step, setStep] = React.useState<number>(0);
const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
useEffect(() => {
return () => {
@ -28,6 +29,8 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
<div>
<div className="flex flex-col gap-4">
{step === 0 && <SelectCard onClose={onClose}
selected={selectedCategory}
setSelectedCategory={setSelectedCategory}
onCard={() => setStep(step + 1)}
isLibrary={isAddingFromLibrary}/>}
{step === 1 && <CreateCard onBack={() => setStep(0)}/>}

13
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
View file

@ -9,11 +9,12 @@ interface SelectCardProps {
onClose: (refresh?: boolean) => void;
onCard: () => void;
isLibrary?: boolean;
selected?: string;
setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
}
const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
const {onCard, isLibrary = false} = props;
const [selected, setSelected] = React.useState<string>('product-analytics');
const {onCard, isLibrary = false, selected, setSelectedCategory} = props;
const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
const {metricStore, dashboardStore} = useStore();
const dashboardId = window.location.pathname.split('/')[3];
@ -83,7 +84,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
)}
</Space>
{!isLibrary && <CategorySelector setSelected={setSelected}/>}
{!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected}/>}
{isLibrary ? <CardsLibrary query={libraryQuery} selectedList={selectedCards} category={selected}
onCard={onCardClick}/> :
<ExampleCardsGrid items={cardItems}/>}
@ -111,15 +112,17 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
// );
interface CategorySelectorProps {
setSelected: React.Dispatch<React.SetStateAction<string>>;
setSelected?: React.Dispatch<React.SetStateAction<string>>;
selected?: string;
}
const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected}) => (
const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected, selected}) => (
<Segmented
options={CARD_CATEGORIES.map(({key, label, icon}) => ({
label: <Option key={key} label={label} Icon={icon}/>,
value: key,
}))}
value={selected}
onChange={setSelected}
/>
);

6
frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
View file

@ -296,8 +296,10 @@ const CardBuilder = observer((props: CardBuilderProps) => {
{/* metric={metric}*/}
{/* writeOption={writeOption}*/}
{/*/>*/}
<MetricTabs metric={metric}
writeOption={writeOption}/>
{/*<MetricTabs metric={metric}*/}
{/* writeOption={writeOption}/>*/}
{metric.metricType === USER_PATH && <PathAnalysisFilter metric={metric}/>}
{isPredefined && <PredefinedMessage/>}
{testingKey && (