Unverified Commit 8c55abc6 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub

Add generic species stats component (#342)

Add generic stats component for the species page
parent c3f49f73
Pipeline #96021 passed with stages
in 7 minutes and 31 seconds
@import 'src/styles/common';
$secondary-text-color: $dark-grey;
.wrapper {
width: 250px;
display: inline-block;
vertical-align: top;
}
.preLabel {
color: $secondary-text-color;
font-size: 11px;
}
.label {
font-size: 12px;
margin-top: -3px;
font-weight: $bold;
}
.primaryValue {
font-size: 22px;
padding-left: 30px;
}
.primaryUnit {
color: $secondary-text-color;
font-size: 13px;
padding-left: 5px;
}
.secondaryValue {
font-size: 12px;
padding-left: 30px;
}
.secondaryUnit {
color: $secondary-text-color;
font-size: 11px;
padding-left: 3px;
}
.link {
text-align: center;
padding-left: 30px;
color: $secondary-text-color;
font-size: 11px;
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import classNames from 'classnames';
import defaultStyles from './SpeciesStats.scss';
type PrimaryDataProps = {
primaryValue: string;
primaryUnit?: string;
};
type PropsWithSecondaryData = {
secondaryValue: string;
secondaryUnit?: string;
};
type PropsWithoutSecondaryData = {
secondaryValue?: never;
secondaryUnit?: never;
};
type ClassNamesProps = {
classNames?: {
wrapper?: string;
preLabel?: string;
label?: string;
primaryValue?: string;
primaryUnit?: string;
secondaryValue?: string;
secondaryUnit?: string;
link?: string;
};
};
export type SpeciesStatsProps = PrimaryDataProps &
(PropsWithSecondaryData | PropsWithoutSecondaryData) &
ClassNamesProps & {
preLabel?: string;
label: string;
link?: React.ReactElement;
};
const SpeciesStats = (props: SpeciesStatsProps) => {
const styles = {
wrapper: classNames(defaultStyles.wrapper, props.classNames?.wrapper),
preLabel: classNames(defaultStyles.preLabel, props.classNames?.preLabel),
label: classNames(defaultStyles.label, props.classNames?.label),
primaryValue: classNames(
defaultStyles.primaryValue,
props.classNames?.primaryValue
),
primaryUnit: classNames(
defaultStyles.primaryUnit,
props.classNames?.primaryUnit
),
secondaryValue: classNames(
defaultStyles.secondaryValue,
props.classNames?.secondaryValue
),
secondaryUnit: classNames(
defaultStyles.secondaryUnit,
props.classNames?.secondaryUnit
),
link: classNames(defaultStyles.link, props.classNames?.link)
};
return (
<div className={styles.wrapper}>
<span className={styles.preLabel}>{props.preLabel}</span>
<div className={styles.label}>{props.label}</div>
<div>
<span className={styles.primaryValue}>{props.primaryValue}</span>
{props.primaryUnit && (
<span className={styles.primaryUnit}>{props.primaryUnit}</span>
)}
</div>
{props.secondaryValue && (
<div>
<span className={styles.secondaryValue}>{props.secondaryValue}</span>
{props.secondaryUnit && (
<span className={styles.secondaryUnit}>{props.secondaryUnit}</span>
)}
</div>
)}
<span className={styles.link}>{props.link}</span>
</div>
);
};
export default SpeciesStats;
......@@ -21,4 +21,5 @@ import './shared-components/index.ts';
import './static-images/index.ts';
import './genome-browser/index.ts';
import './entity-viewer/index.ts';
import './species/index.ts';
import './hooks/index.ts';
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import './species-stats/SpeciesStats.stories';
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { storiesOf } from '@storybook/react';
import SpeciesStats, {
SpeciesStatsProps
} from 'src/content/app/species/components/species-stats/SpeciesStats';
import styles from './SpeciesStats.stories.scss';
const renderSpeciesStats = (props: SpeciesStatsProps) => {
return <SpeciesStats {...props} />;
};
storiesOf('Components|Species/SpeciesStats', module).add('default', () => (
<div className={styles.wrapper}>
{renderSpeciesStats({
label: 'Coding genes',
primaryValue: '20,438',
secondaryValue: '671',
secondaryUnit: 'readthrough'
})}
{renderSpeciesStats({
preLabel: 'preLabel',
label: 'label',
primaryValue: 'primaryValue',
primaryUnit: 'primaryUnit',
secondaryValue: 'secondaryValue',
secondaryUnit: 'secondaryUnit',
link: <a href="/">Link</a>
})}
{renderSpeciesStats({
preLabel: 'No. genes in',
label: 'Biological process',
primaryValue: '7,343',
primaryUnit: 'xyz',
secondaryValue: '1892',
secondaryUnit: 'terms'
})}
{renderSpeciesStats({
label: 'Transcriptomic data',
primaryValue: '90%',
link: <a href="/">View</a>
})}
{renderSpeciesStats({
label: 'SNVs',
primaryValue: '91%'
})}
</div>
));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment