Skip to content

Commit

Permalink
[DTRA]/Ahmad/DTRA-951/Template Message For Accumulators (deriv-com#1534)
Browse files Browse the repository at this point in the history 
* info message

* fix

* review fix

* Update src/utils/index.ts

---------

Co-authored-by: balakrishna-deriv <[email protected]>
  • Loading branch information
@ahmadtaimoor-deriv @balakrishna-deriv
ahmadtaimoor-deriv and balakrishna-deriv authored Mar 18, 2024
1 parent bda62ce commit 8171c26
Show file tree
Hide file tree
Showing 8 changed files with 202 additions and 32 deletions.
14 changes: 0 additions & 14 deletions sass/components/_chart-mode.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,6 @@
}
}
}
&__text {
@include themify($themes) {
color: themed('ChartModeText') !important;
}
line-height: 18px;
font-size: 12px;
font-weight: 400;
padding: 16px;
text-align: center;

&--mobile {
font-size: 11px;
}
}
}
}

Expand Down
14 changes: 14 additions & 0 deletions sass/components/_dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,20 @@
}
}
}
.info-footnote {
@include themify($themes) {
color: themed('ChartModeText') !important;
}
line-height: 18px;
font-size: 12px;
font-weight: 400;
padding: 16px;
text-align: center;

&--mobile {
font-size: 11px;
}
}
}

.tabs {
Expand Down
5 changes: 5 additions & 0 deletions sass/components/_view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,11 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

&--disabled {
opacity: 0.5;
cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.ic-icon {
@include themify($themes) {
Expand Down
17 changes: 9 additions & 8 deletions src/components/ChartMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from './Icons';
import Menu from './Menu';
import Timeperiod from './Timeperiod';

import InfoFootnote from './InfoFootnote';

type TChartModeProps = {
portalNodeId?: string;
Expand Down Expand Up @@ -67,17 +67,18 @@ const ChartMode = ({ onChartType, onGranularity, portalNodeId }: TChartModeProps
</div>
</div>
{allowTickChartTypeOnly && (
<div
className={classNames('sc-chart-mode__section__text', {
'sc-chart-mode__section__text--mobile': isMobile,
})}
>
{t.translate('Only selected charts and time intervals are available for this trade type.')}
</div>
<InfoFootnote
isMobile={isMobile}
text={t.translate('Only selected charts and time intervals are available for this trade type.')}
/>
)}
</Menu.Body>
</Menu>
);
};

ChartMode.defaultProps = {
portalNodeId: '',
};

export default observer(ChartMode);
25 changes: 25 additions & 0 deletions src/components/InfoFootnote.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import classNames from 'classnames';
import React from 'react';

type InfoFootnoteProps = {
className?: string;
isMobile?: boolean;
text: string;
};

const InfoFootnote = ({ className, isMobile, text }: InfoFootnoteProps) => (
<div
className={classNames(className,{
[`${className}--mobile`]: isMobile,
})}
>
{text}
</div>
);

InfoFootnote.defaultProps = {
className: 'info-footnote',
isMobile: false,
};

export default React.memo(InfoFootnote);
36 changes: 30 additions & 6 deletions src/components/Views.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import { wrapText } from '../utils';
import { TemplateIcon, AddIcon, DeleteIcon, EmptyStateIcon, OverwriteStateIcon } from './Icons';
import '../../sass/components/_view.scss';
import Menu from './Menu';
import InfoFootnote from './InfoFootnote';

type TViewItemProps = {
disabled?: boolean;
onClick: (event: React.MouseEvent<HTMLElement>) => void;
view: ArrayElement<TViews>;
remove: (event: React.MouseEvent<HTMLElement>) => void;
Expand All @@ -30,6 +32,7 @@ type TOverwriteViewProps = {
};

type TActiveListViewProps = {
allowTickChartTypeOnly: TMainStore['state']['allowTickChartTypeOnly'];
removeAll: TMainStore['view']['removeAll'];
views: TMainStore['view']['sortedItems'];
applyLayout: TMainStore['view']['applyLayout'];
Expand All @@ -38,18 +41,22 @@ type TActiveListViewProps = {
onGranularity: (granularity?: TGranularity) => void;
};

const ViewItem = ({ view, remove, onClick }: TViewItemProps) => (
const ViewItem = ({ disabled, view, remove, onClick }: TViewItemProps) => (
<Tooltip
className='sc-views__views__list__item'
onClick={onClick}
onClick={disabled ? undefined : onClick}
enabled={view.name.length > 27}
content={wrapText(view.name, 26)}
>
<div className='text'>{view.name}</div>
<div className={classNames('text', { 'text--disabled': disabled })}>{view.name}</div>
<DeleteIcon onClick={remove} />
</Tooltip>
);

ViewItem.defaultProps = {
disabled: false,
};

const EmptyView = ({ onClick }: { onClick: (event: React.MouseEvent<HTMLElement>) => void }) => (
<div className='sc-views--empty'>
<EmptyStateIcon />
Expand Down Expand Up @@ -83,6 +90,7 @@ const OverwriteView = ({ templateName, onCancel, onOverwrite }: TOverwriteViewPr
);

const ActiveListView = ({
allowTickChartTypeOnly,
views,
removeAll,
applyLayout,
Expand All @@ -92,6 +100,12 @@ const ActiveListView = ({
}: TActiveListViewProps) => {
if (!views.length) return null;

const isDisabled = (layout: TMainStore['view']['sortedItems'][number]['layout']) => {
const { chartType, timeUnit } = layout ?? {};
const oneTickChartTemplate = chartType === 'line' && timeUnit === 'tick';
return allowTickChartTypeOnly && !oneTickChartTemplate;
};

return (
<div className='sc-views__views'>
<div className='sc-views__views__head'>
Expand All @@ -104,6 +118,7 @@ const ActiveListView = ({
<div className='sc-views__views__list'>
{views.map((view, i) => (
<ViewItem
disabled={isDisabled(view.layout)}
view={view}
key={view.name}
onClick={e => applyLayout(i, e as TCustomEvent, onGranularity, onChartType)}
Expand All @@ -117,7 +132,9 @@ const ActiveListView = ({
};

const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
const { view } = useStores();
const { view, state, chart } = useStores();
const { allowTickChartTypeOnly } = state;
const { isMobile } = chart;

const {
sortedItems: views,
Expand Down Expand Up @@ -161,7 +178,7 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
{currentRoute === 'new' ? (
<EmptyView onClick={onToggleNew} />
) : (
<React.Fragment>
<>
{currentRoute !== 'overwrite' ? (
''
) : (
Expand Down Expand Up @@ -209,6 +226,7 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
</div>
</div>
<ActiveListView
allowTickChartTypeOnly={allowTickChartTypeOnly}
views={views}
removeAll={removeAll}
applyLayout={applyLayout}
Expand All @@ -217,9 +235,15 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
onGranularity={onGranularity}
/>
</Scroll>
</React.Fragment>
</>
)}
</div>
{allowTickChartTypeOnly && (
<InfoFootnote
isMobile={isMobile}
text={t.translate('Some of your templates may not work with this trade type.')}
/>
)}
</Menu.Body>
</Menu>
);
Expand Down
117 changes: 116 additions & 1 deletion src/utils/__tests__/index.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect } from 'chai';
import { Intervals } from 'src/Constant';
import { getSymbolMarketCategory, getTimeIntervalName, getYAxisScalingParams } from '..';
import { getIntervalInSeconds, getSymbolMarketCategory, getTimeIntervalName, getYAxisScalingParams } from '..';

describe('getYAxisScalingParams', () => {
const mocked_height_desktop = 700;
Expand Down Expand Up @@ -149,3 +149,118 @@ describe('getTimeIntervalName', () => {
expect(getTimeIntervalName(300, intervals)).to.equal('5 minutes');
});
});

describe('getIntervalInSeconds', () => {
it('should return correct number of seconds for 1-tick interval', () => {
expect(
getIntervalInSeconds({
interval: 1,
timeUnit: 'second',
})
).to.equal(1);
});
it('should return correct number of seconds for 1-minute interval', () => {
expect(
getIntervalInSeconds({
interval: 1,
timeUnit: 'minute',
})
).to.equal(60);
});
it('should return correct number of seconds for 2-minute interval', () => {
expect(
getIntervalInSeconds({
interval: 2,
timeUnit: 'minute',
})
).to.equal(120);
});
it('should return correct number of seconds for 3-minute interval', () => {
expect(
getIntervalInSeconds({
interval: 3,
timeUnit: 'minute',
})
).to.equal(180);
});
it('should return correct number of seconds for 5 minutes interval', () => {
expect(
getIntervalInSeconds({
interval: 5,
timeUnit: 'minute',
})
).to.equal(300);
});
it('should return correct number of seconds for 10 minutes interval', () => {
expect(
getIntervalInSeconds({
interval: 10,
timeUnit: 'minute',
})
).to.equal(600);
});
it('should return correct number of seconds for 15 minutes interval', () => {
expect(
getIntervalInSeconds({
interval: 15,
timeUnit: 'minute',
})
).to.equal(900);
});
it('should return correct number of seconds for 30 minutes interval', () => {
expect(
getIntervalInSeconds({
interval: 30,
timeUnit: 'minute',
})
).to.equal(1800);
});
it('should return correct number of seconds for 1-hour interval', () => {
expect(
getIntervalInSeconds({
interval: 60,
timeUnit: 'minute',
})
).to.equal(3600);
});
it('should return correct number of seconds for 2-hour interval', () => {
expect(
getIntervalInSeconds({
interval: 120,
timeUnit: 'minute',
})
).to.equal(7200);
});
it('should return correct number of seconds for 4-hour interval', () => {
expect(
getIntervalInSeconds({
interval: 240,
timeUnit: 'minute',
})
).to.equal(14400);
});
it('should return correct number of seconds for 8-hour interval', () => {
expect(
getIntervalInSeconds({
interval: 480,
timeUnit: 'minute',
})
).to.equal(28800);
});
it('should return correct number of seconds for 1-day interval', () => {
expect(
getIntervalInSeconds({
interval: 'day',
timeUnit: null,
})
).to.equal(86400);
});
it('should return NaN if interval is incorrect', () => {
(expect(
getIntervalInSeconds({
interval: 1,
timeUnit: 'day',
})
).to.be.NaN as unknown) as () => void;
});
});
6 changes: 3 additions & 3 deletions src/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const getIntervalInSeconds = ({
timeUnit,
interval,
}: {
timeUnit?: string | number;
timeUnit?: string | number | null;
interval?: string | number;
}) => {
let unit = timeUnit;
Expand All @@ -110,14 +110,14 @@ export const getIntervalInSeconds = ({
unit = 1;
}

if (unit !== undefined && interv !== undefined) {
if (unit !== undefined && interv !== undefined && unit !== null) {
if (typeof unit === 'string') {
unit = Number(unit);
}
if (typeof interv === 'string') {
interv = Number(interv);
}
return unit * interv;
return Number(unit) * interv;
}

return 0;
Expand Down

0 comments on commit 8171c26

Please sign in to comment.