| 6 | "": "const { daos, API, dateRange } = props;\\\\n\\\\nconst Wrapper = styled.div`\\\\n width: 100%;\\\\n\\\\n .selected-container {\\\\n width: 100%;\\\\n display: flex;\\\\n justify-content: space-between;\\\\n align-items: center;\\\\n padding: 5px 16px;\\\\n gap: 10px;\\\\n font-size: 14px;\\\\n font-weight: 600;\\\\n\\\\n i {\\\\n color: #b0afb1;\\\\n }\\\\n\\\\n &.dao {\\\\n @media screen and (max-width: 768px) {\\\\n width: 100%;\\\\n }\\\\n }\\\\n }\\\\n`;\\\\n\\\\nconst DesktopFilters = styled.div`\\\\n display: flex;\\\\n width: 100%;\\\\n border-radius: 6px;\\\\n background: #f8f8f8;\\\\n\\\\n @media screen and (max-width: 1000px) {\\\\n gap: 40px;\\\\n }\\\\n\\\\n @media screen and (max-width: 768px) {\\\\n display: none;\\\\n }\\\\n`;\\\\n\\\\nconst MobileFilters = styled.div`\\\\n display: none;\\\\n width: 100%;\\\\n\\\\n @media screen and (max-width: 768px) {\\\\n display: flex;\\\\n flex-direction: column;\\\\n gap: 1rem;\\\\n }\\\\n\\\\n .filters {\\\\n display: flex;\\\\n flex-direction: column;\\\\n justify-content: center;\\\\n gap: 1rem;\\\\n }\\\\n`;\\\\n\\\\nconst Loading = () => <Widget src=\\\\\\\"flashui.near/widget/Loading\\\\\\\" />;\\\\n\\\\nconst defaultDAOOption = \\\\\\\"All DAOs\\\\\\\";\\\\n\\\\nconst FILTER_IDS = {\\\\n dao: \\\\\\\"dao\\\\\\\",\\\\n userRetentions: \\\\\\\"userRetentions\\\\\\\",\\\\n dappsUsed: \\\\\\\"dappsUsed\\\\\\\",\\\\n acquisitionCost: \\\\\\\"acquisitionCost\\\\\\\",\\\\n socialEngagement: \\\\\\\"socialEngagement\\\\\\\",\\\\n};\\\\n\\\\nconst FILTER_OPENS = Object.keys(FILTER_IDS).map((item) => {\\\\n return { [item]: false };\\\\n});\\\\n\\\\nconst [dataSet, setDataSet] = useState([]);\\\\nconst [loading, setLoading] = useState(false);\\\\nconst [selectedDAOs, setSelectedDAOs] = useState(daos.map((d) => d.title));\\\\nconst [filteredData, setFilteredData] = useState([]);\\\\nconst [filtersIsOpen, setFiltersIsOpen] = useState(FILTER_OPENS);\\\\nconst [mobileFilters, setMobileFilters] = useState(false);\\\\nconst [asc, setAsc] = useState(true);\\\\n\\\\nconst onFilterClick = (value) =>\\\\n setFiltersIsOpen({ ...FILTER_OPENS, [value]: !filtersIsOpen[value] });\\\\n\\\\nconst filterDAO = (value) => {\\\\n let newSelection;\\\\n\\\\n if (value === defaultDAOOption) {\\\\n const all = [defaultDAOOption, ...daos.map((d) => d.title)];\\\\n const isCurrentSelectionFull = selectedDAOs.length === all.length;\\\\n newSelection = isCurrentSelectionFull ? [] : all;\\\\n } else if (selectedDAOs.includes(value)) {\\\\n newSelection = selectedDAOs.filter(\\\\n (daoId) => daoId !== value && daoId !== defaultDAOOption\\\\n );\\\\n } else {\\\\n newSelection = [...selectedDAOs, value];\\\\n }\\\\n\\\\n setSelectedDAOs(newSelection);\\\\n};\\\\n\\\\nconst fetchData = async (key) => {\\\\n setLoading(true);\\\\n const filtredDAOs = selectedDAOs.length\\\\n ? daos.filter((d) => selectedDAOs.includes(d.title))\\\\n : daos;\\\\n\\\\n let newDataSet = dataSet;\\\\n\\\\n API[key](filtredDAOs).then((resp) => {\\\\n if (!resp.body) return;\\\\n\\\\n const data = resp.body;\\\\n if (data)\\\\n Object.entries(data).map(([id, value]) => {\\\\n const targetData = newDataSet.find((d) => d.id === parseInt(id));\\\\n targetData[key] = parseInt(value);\\\\n });\\\\n\\\\n setDataSet(newDataSet);\\\\n setFilteredData(newDataSet);\\\\n setLoading(false);\\\\n });\\\\n};\\\\n\\\\nuseEffect(() => {\\\\n const filtredDAOs = selectedDAOs.length\\\\n ? daos.filter((d) => selectedDAOs.includes(d.title))\\\\n : daos;\\\\n\\\\n if (dataSet.length === 0)\\\\n setDataSet(\\\\n filtredDAOs.map((dao) => {\\\\n return {\\\\n id: dao.id,\\\\n title: dao.title,\\\\n [FILTER_IDS.userRetentions]: 0,\\\\n [FILTER_IDS.dappsUsed]: 0,\\\\n [FILTER_IDS.acquisitionCost]: 0,\\\\n [FILTER_IDS.socialEngagement]: 0,\\\\n };\\\\n })\\\\n );\\\\n\\\\n setFilteredData(\\\\n dataSet.filter((d) => filtredDAOs.map((dd) => dd.title).includes(d.title))\\\\n );\\\\n}, [selectedDAOs]);\\\\n\\\\nuseEffect(() => {\\\\n if (dataSet.length > 0 && dateRange) {\\\\n fetchData(FILTER_IDS.userRetentions);\\\\n fetchData(FILTER_IDS.dappsUsed);\\\\n fetchData(FILTER_IDS.acquisitionCost);\\\\n fetchData(FILTER_IDS.socialEngagement);\\\\n }\\\\n}, [dataSet, dateRange]);\\\\n\\\\nconst sortData = (field, asc) =>\\\\n setFilteredData(\\\\n filteredData.sort((a, b) =>\\\\n asc ? b[field] - a[field] : a[field] - b[field]\\\\n )\\\\n );\\\\n\\\\nconst SortingRow = ({ title, field }) => (\\\\n <div\\\\n role=\\\\\\\"button\\\\\\\"\\\\n className=\\\\\\\"selected-container\\\\\\\"\\\\n onClick={() => {\\\\n sortData(field, asc);\\\\n setAsc(!asc);\\\\n }}\\\\n >\\\\n <div className=\\\\\\\"d-flex align-items-end gap-2\\\\\\\">\\\\n <i className=\\\\\\\"ph ph-info fs-5\\\\\\\" />\\\\n <div>{title}</div>\\\\n </div>\\\\n <i role=\\\\\\\"button\\\\\\\" className=\\\\\\\"ph ph-caret-up-down fs-5\\\\\\\" />\\\\n </div>\\\\n);\\\\n\\\\nreturn (\\\\n <Wrapper>\\\\n <MobileFilters>\\\\n <div className=\\\\\\\"w-100 gap-3 d-flex justify-content-between align-items-center\\\\\\\">\\\\n <Widget\\\\n src={`ndcdev.near/widget/dashboard.Components.Select`}\\\\n props={{\\\\n id: FILTER_IDS.dao,\\\\n text: \\\\\\\"DAO\\\\\\\",\\\\n hintText: \\\\\\\"NDC grassroots DAOs\\\\\\\",\\\\n options: daos.map((d) => d.title),\\\\n values: selectedDAOs,\\\\n defaultValue: defaultDAOOption,\\\\n multiple: true,\\\\n filterIsOpen: filtersIsOpen[FILTER_IDS.dao],\\\\n onFilterClick,\\\\n onChange: filterDAO,\\\\n onClear: () => {\\\\n setSelectedDAOs(daos.map((d) => d.title));\\\\n },\\\\n isTooltipVisible: true,\\\\n noBorder: true,\\\\n containerClass: \\\\\\\"selected-container dao\\\\\\\",\\\\n }}\\\\n />\\\\n <div\\\\n role=\\\\\\\"button\\\\\\\"\\\\n className=\\\\\\\"btn btn-secondary outlined btn-icon\\\\\\\"\\\\n onClick={() => setMobileFilters(!mobileFilters)}\\\\n >\\\\n <i className=\\\\\\\"ph ph-funnel fs-5\\\\\\\" />\\\\n </div>\\\\n </div>\\\\n {mobileFilters && (\\\\n <div className=\\\\\\\"filters\\\\\\\">\\\\n <SortingRow\\\\n title=\\\\\\\"User Retention\\\\\\\"\\\\n field={FILTER_IDS.userRetentions}\\\\n />\\\\n <SortingRow title=\\\\\\\"DApp\\\\\\'s Used\\\\\\\" field={FILTER_IDS.dappsUsed} />\\\\n <SortingRow\\\\n title=\\\\\\\"Acquisition Cost\\\\\\\"\\\\n field={FILTER_IDS.acquisitionCost}\\\\n />\\\\n <SortingRow\\\\n title=\\\\\\\"Social Engagement\\\\\\\"\\\\n field={FILTER_IDS.socialEngagement}\\\\n />\\\\n </div>\\\\n )}\\\\n </MobileFilters>\\\\n <DesktopFilters>\\\\n <div className=\\\\\\\"w-100 gap-5 d-flex justify-content-between align-items-center\\\\\\\">\\\\n <Widget\\\\n src={`ndcdev.near/widget/dashboard.Components.Select`}\\\\n props={{\\\\n id: FILTER_IDS.dao,\\\\n text: \\\\\\\"DAO\\\\\\\",\\\\n hintText: \\\\\\\"NDC grassroots DAOs\\\\\\\",\\\\n options: daos.map((d) => d.title),\\\\n values: selectedDAOs,\\\\n defaultValue: defaultDAOOption,\\\\n multiple: true,\\\\n filterIsOpen: filtersIsOpen[FILTER_IDS.dao],\\\\n onFilterClick,\\\\n onChange: (value) => filterDAO(value),\\\\n onClear: () => {\\\\n setSelectedDAOs([]);\\\\n },\\\\n isTooltipVisible: true,\\\\n noBorder: true,\\\\n containerClass: \\\\\\\"selected-container dao\\\\\\\",\\\\n }}\\\\n />\\\\n <SortingRow title=\\\\\\\"User Retention\\\\\\\" field={FILTER_IDS.userRetentions} />\\\\n <SortingRow title=\\\\\\\"DApp\\\\\\'s Used\\\\\\\" field={FILTER_IDS.dappsUsed} />\\\\n <SortingRow\\\\n title=\\\\\\\"Acquisition Cost\\\\\\\"\\\\n field={FILTER_IDS.acquisitionCost}\\\\n />\\\\n <SortingRow\\\\n title=\\\\\\\"Social Engagement\\\\\\\"\\\\n field={FILTER_IDS.socialEngagement}\\\\n />\\\\n </div>\\\\n </DesktopFilters>\\\\n <Widget\\\\n src={`ndcdev.near/widget/dashboard.Components.Table.Cells`}\\\\n props={{ dataSet: filteredData, loading }}\\\\n />\\\\n </Wrapper>\\\\n);\\\\n" |