feat(ui) - dropdown alignments
This commit is contained in:
Shekar Siri
parent
44853973cf
commit
2b5d85cb35
9 changed files with 37 additions and 22 deletions
|
|
@ -1,14 +1,11 @@
|
|||
import React from 'react'
|
||||
import { Styles } from '../../common';
|
||||
import { AreaChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
|
||||
import { LineChart, Line, Legend } from 'recharts';
|
||||
import cn from 'classnames';
|
||||
import { AreaChart, ResponsiveContainer, XAxis, YAxis, Area, Tooltip } from 'recharts';
|
||||
import CountBadge from '../../common/CountBadge';
|
||||
import { numberWithCommas } from 'App/utils';
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
// onClick?: (event, index) => void;
|
||||
}
|
||||
function CustomMetricOverviewChart(props: Props) {
|
||||
const { data } = props;
|
||||
|
|
@ -33,7 +30,7 @@ function CustomMetricOverviewChart(props: Props) {
|
|||
<AreaChart
|
||||
data={ data.chart }
|
||||
margin={ {
|
||||
top: 50, right: 0, left: 0, bottom: 1,
|
||||
top: 50, right: 0, left: 0, bottom: 0,
|
||||
} }
|
||||
>
|
||||
{gradientDef}
|
||||
|
|
@ -60,7 +57,7 @@ function CustomMetricOverviewChart(props: Props) {
|
|||
export default CustomMetricOverviewChart
|
||||
|
||||
|
||||
const countView = (avg, unit) => {
|
||||
const countView = (avg: any, unit: any) => {
|
||||
if (unit === 'mb') {
|
||||
if (!avg) return 0;
|
||||
const count = Math.trunc(avg / 1024 / 1024);
|
||||
|
|
@ -72,4 +69,4 @@ const countView = (avg, unit) => {
|
|||
return numberWithCommas(count > 1000 ? count +'k' : count);
|
||||
}
|
||||
return avg ? numberWithCommas(avg): 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +61,7 @@ function DashboardEditModal(props: Props) {
|
|||
<label>{'Description:'}</label>
|
||||
<Input
|
||||
className=""
|
||||
type="textarea"
|
||||
name="description"
|
||||
value={ dashboard.description }
|
||||
onChange={write}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }
|
|||
});
|
||||
return (
|
||||
<div
|
||||
className={cn("rounded p-4 border cursor-pointer", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
|
||||
className={cn("rounded p-4 border cursor-pointer hover:bg-active-blue", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
|
||||
onClick={() => onClick(category)}
|
||||
>
|
||||
<div className="font-medium text-lg mb-2 capitalize">{category.name}</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function MetricsView(props: Props) {
|
|||
metricStore.fetchList();
|
||||
}, []);
|
||||
return useObserver(() => (
|
||||
<div style={{ maxWidth: 1300 }}>
|
||||
<div style={{ maxWidth: '1300px', margin: 'auto'}}>
|
||||
<div className="flex items-center mb-4 justify-between">
|
||||
<div className="flex items-baseline mr-3">
|
||||
<PageTitle title="Metrics" className="" />
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ function WidgetChart(props: Props) {
|
|||
}
|
||||
|
||||
if (metricType === 'funnel') {
|
||||
return <FunnelWidget metric={metric} isWidget={isWidget} />
|
||||
return <FunnelWidget metric={metric} isWidget={isWidget || isTemplate} />
|
||||
}
|
||||
|
||||
if (metricType === 'predefined') {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ const dropdownStyles = {
|
|||
...provided,
|
||||
paddingRight: '0px',
|
||||
width: 'fit-content',
|
||||
// height: '26px'
|
||||
'& input': {
|
||||
marginTop: '-3px',
|
||||
},
|
||||
}),
|
||||
placeholder: (provided: any) => ({
|
||||
...provided,
|
||||
|
|
@ -40,6 +42,7 @@ const dropdownStyles = {
|
|||
top: 20,
|
||||
left: 0,
|
||||
minWidth: 'fit-content',
|
||||
overflow: 'hidden',
|
||||
}),
|
||||
container: (provided: any) => ({
|
||||
...provided,
|
||||
|
|
@ -49,7 +52,12 @@ const dropdownStyles = {
|
|||
const opacity = state.isDisabled ? 0.5 : 1;
|
||||
const transition = 'opacity 300ms';
|
||||
|
||||
return { ...provided, opacity, transition };
|
||||
return {
|
||||
...provided,
|
||||
opacity,
|
||||
transition,
|
||||
marginTop: '-3px',
|
||||
};
|
||||
}
|
||||
}
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ function FilterValue(props: Props) {
|
|||
case FilterType.DROPDOWN:
|
||||
return (
|
||||
<FilterValueDropdown
|
||||
search={true}
|
||||
// search={true}
|
||||
value={value}
|
||||
filter={filter}
|
||||
options={filter.options}
|
||||
|
|
@ -100,9 +100,9 @@ function FilterValue(props: Props) {
|
|||
return (
|
||||
<FilterValueDropdown
|
||||
search={true}
|
||||
multiple={true}
|
||||
// multiple={true}
|
||||
value={value}
|
||||
filter={filter}
|
||||
// filter={filter}
|
||||
options={filter.options}
|
||||
onChange={({ value }) => onChange(null, { value }, valueIndex)}
|
||||
onAddValue={onAddValue}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ const dropdownStyles = {
|
|||
top: 20,
|
||||
left: 0,
|
||||
minWidth: 'fit-content',
|
||||
overflow: 'hidden',
|
||||
}),
|
||||
container: (provided: any) => ({
|
||||
...provided,
|
||||
|
|
@ -50,9 +51,10 @@ const dropdownStyles = {
|
|||
}),
|
||||
input: (provided: any) => ({
|
||||
...provided,
|
||||
// padding: '0px',
|
||||
// margin: '0px',
|
||||
height: '22px',
|
||||
'& input:focus': {
|
||||
border: 'none !important',
|
||||
}
|
||||
}),
|
||||
singleValue: (provided: any, state: { isDisabled: any; }) => {
|
||||
const opacity = state.isDisabled ? 0.5 : 1;
|
||||
|
|
@ -67,14 +69,14 @@ const dropdownStyles = {
|
|||
}
|
||||
}
|
||||
interface Props {
|
||||
filter: any; // event/filter
|
||||
// filter: any; // event/filter
|
||||
// options: any[];
|
||||
value: string;
|
||||
onChange: (value: any) => void;
|
||||
className?: string;
|
||||
options: any[];
|
||||
search?: boolean;
|
||||
multiple?: boolean;
|
||||
// multiple?: boolean;
|
||||
showCloseButton?: boolean;
|
||||
showOrButton?: boolean;
|
||||
onRemoveValue?: () => void;
|
||||
|
|
@ -82,7 +84,7 @@ interface Props {
|
|||
isMultilple?: boolean;
|
||||
}
|
||||
function FilterValueDropdown(props: Props) {
|
||||
const { filter, multiple = false, isMultilple = true, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
|
||||
const { isMultilple = true, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
|
||||
// const options = []
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,14 +7,21 @@ interface Props {
|
|||
className: string;
|
||||
icon?: string;
|
||||
leadingButton?: React.ReactNode;
|
||||
type?: string;
|
||||
rows?: number;
|
||||
[x:string]: any;
|
||||
}
|
||||
function Input(props: Props) {
|
||||
const { className, leadingButton = "", wrapperClassName = "", icon = "", ...rest } = props;
|
||||
const { className, leadingButton = "", wrapperClassName = "", icon = "", type="text", rows=4, ...rest } = props;
|
||||
return (
|
||||
<div className={cn({ "relative" : icon || leadingButton }, wrapperClassName)}>
|
||||
{icon && <Icon name={icon} className="absolute top-0 bottom-0 my-auto ml-4" size="14" />}
|
||||
<input style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
|
||||
{ type === 'textarea' ? (
|
||||
<textarea rows={rows} style={{ resize: 'none' }} maxLength={500} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
|
||||
) : (
|
||||
<input style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
|
||||
)}
|
||||
|
||||
{ leadingButton && <div className="absolute top-0 bottom-0 right-0">{ leadingButton }</div> }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue