小编Mic*_*orn的帖子

我试图了解如何将youtube嵌入到我的应用中。

import React from "react"
import Pageheader from 'react-bootstrap/lib/Pageheader';
import ResponsiveEmbed from 'react-bootstrap/lib/ResponsiveEmbed';
import Grid from 'react-bootstrap/lib/Grid';

export default class Services extends React.Component {
  render() {
    return (
        <div id = "services">
            <Pageheader justified>
                About us
                <small>M2 Consulting is Bringing Small Businesses to the Agile century</small>
                <ResponsiveEmbed a16by9>
                    <embed src="https://youtu.be/uC9VtVnuPD0"/>
                </ResponsiveEmbed>
            </Pageheader>
        </div>
    )
  }
}

这就是我目前所拥有的。

我尝试了几种不同的方法来正确显示，但是发现使用了例如youtube的嵌入代码来创建多个错误。我正在尝试复制此网站及其显示嵌入视频的方式。

http://www.milkbardigital.com.au/

使用react-table，我可以很好地过滤数据，但希望它更动态

现在我正在努力完成的是过滤图表中的数据，使其更有意义，部分方法是将来自单一品牌的产品聚集在一个条形图中，以及删除过多的品牌，这些品牌使信息更难理解.

这是我正在使用的 Table 组件

import React from 'react'
import {
    useTable,
    usePagination,
    useSortBy,
    useFilters,
    useGroupBy,
    useExpanded,
    useRowSelect,
  } from 'react-table'
  import matchSorter from 'match-sorter'
  
  // import makeData from '../example/makedata.js'
  
  
  // Create an editable cell renderer
  const EditableCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateMyData, // This is a custom function that we supplied to our table instance
    editable,
  }) => {
    // We need to keep and update the state of the cell …

感谢对此任务的任何帮助！

我正在尝试使该破折号应用程序采用滑块输入值来通过函数更改变量，然后仅更改标记颜色变量。

该代码使用python编写，并使用plotly-dash和plotly以及pandas numpy和mapbox。

代码的顶部是将数据转换为正确的格式。它具有正在处理的交通数据，以生成热图，该热图在地图上显示一段时间内的拥堵情况。数据框DF用于处理流量，并且创建了数据框HF，因此滑块可以工作（我在与滑块一起使用的列数上添加了编号为0的列）-函数datatime应该根据时间和检测器ID。

我最初使用javascript创建了此功能，如下所示-https: //jsbin.com/detejef/edit?html ,js, output

我已经在这段代码上工作了一段时间了。非常接近最终获得原型，但有一个障碍-时间变量无法正确更新，并随着检测器的更改重新更新地图...

我只需要标记字典子函数的颜色来改变滑块值，并结合我创建的函数即可。该功能本身起作用。

这是对代码的更新。

#  data wrangling

xls = pd.ExcelFile('FreewayFDSData.xlsx')  # this loads the data only once saving memory
df = pd.read_excel(xls, 'Volume', parse_dates=True, index_col="Time")
df = df.T

df2 = pd.read_excel(xls, 'Occupancy', parse_dates=True, index_col="Time")
df2 = df2.T

df3 = pd.read_excel(xls, 'Speed', parse_dates=True, index_col="Time")
df3 = df3.T

Detectors = list(df.columns)

mf = pd.read_excel('FreewayFDSData.xlsx', 'Coordinates', index_col="Short Name")

#   return df, df2, df3, Detectors, mf


# input slider value then output into data frame filter …

我正在尝试将material-ui 与next.js/react.js 一起使用。

通过 _app.js 应用布局文件时，出现错误。

这是使用示例react.js模板material-ui提供的（如此令人困惑为什么它不能简单地工作 - 我的印象是material-ui通常与next.js存在问题？）。

我尝试了几种不同的方法，更改文档和应用程序，似乎仍然不起作用。

这是 Layout.js 文件

import React from \'react\';\nimport clsx from \'clsx\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport CssBaseline from \'@material-ui/core/CssBaseline\';\nimport Drawer from \'@material-ui/core/Drawer\';\nimport List from \'@material-ui/core/List\';\nimport Divider from \'@material-ui/core/Divider\';\nimport IconButton from \'@material-ui/core/IconButton\';\nimport Badge from \'@material-ui/core/Badge\';\nimport Container from \'@material-ui/core/Container\';\nimport Grid from \'@material-ui/core/Grid\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Link from \'@material-ui/core/Link\';\nimport MenuIcon from \'@material-ui/icons/Menu\';\nimport ChevronLeftIcon from \'@material-ui/icons/ChevronLeft\';\nimport NotificationsIcon from \'@material-ui/icons/Notifications\';\nimport { mainListItems, secondaryListItems } from \'../Sidebar/Sidebar\';\nimport Chart from \'../Charts/Chart\';\nimport Deposits from …

我正在过滤来自澳大利亚 ABS 的血统。我正在获取如下祖先数据。

allvic_url='ABS_CENSUS2011_T09/TOT+1+2+3+4+Z.TOT+TOTP+1101+1102+6101+3204+2303+2101+5201+2305+2306+3205+3304+7106+2201+3103+6902+4106+3206+3104+1201+1202+3307+3308+2102+3213+7115+9215+3106+4907+5107+2103+OTH+Z.2.SA2..A/all?detail=Full&dimensionAtObservation=AllDimensions'

然后，我在使用较新的 2016 数据集显示祖先随时间变化的问题时遇到了问题，因为 api 非常混乱......这里是http://stat.data.abs.gov.au/#。（我想尝试展示郊区的人口统计数据是如何变化的）。

我的目标输出是郊区级别的数据框，显示血统随时间的变化。如果 api 可以给我更多的历史数据，那也太棒了。

Suburb  Ancestry Main   Ancestry Secondary  Ancestry increased most Percentage increase 2016-2011   

（即，显示祖先平均值是中国人，adn 随时间变化了 x%）。

将不胜感激帮助解决此问题 - 谢谢！

由于某种原因，顺风在 next.js 中无法正确呈现。

我想知道我的设置是否有问题？

样式文件夹 - tailwind.css

@顺风基地；

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

....

_app.js

import React from "react";
// import "styles/global.scss";


import 'styles/tailwind.css'


import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from …

我正在尝试使用https://www.npmjs.com/package/@next/bundle-analyzer来减小我网站的包大小

此刻，当我npm analyze与

"analyze": "cross-env ANALYZE=true next build",

它不输出具有所需可视化效果的 html 文件。

这是我的 next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  })

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

使用这个nextjs-analyze-app-bundle 教程。

出了什么问题？

我试图让我的页面看起来类似于这个https://dash.blinq.app/onboarding/personal-details

目前使用此代码，我使用顺风获得了非常糟糕的 flex 样式，我似乎无法弄清楚如何正确修复它。

    import { ChevronRightIcon, HomeIcon } from '@heroicons/react/solid'

const pages = [
  { name: 'Privacy', href: '#', current: false },
  { name: 'Customizations', href: '#', current: true },
  { name: 'Details', href: '#', current: true },


]

function BreadCrumbs() {
  return (
    <nav className="flex" aria-label="Breadcrumb">
      <ol className="flex items-center space-x-4">
        <li>
          <div>
            <a href="#" className="text-gray-400 hover:text-gray-500">
              <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Home</span>
            </a>
          </div>
        </li>
        {pages.map((page) => (
          <li key={page.name}>
            <div className="flex items-center">
              <ChevronRightIcon className="flex-shrink-0 …

我正在尝试使用 fastapi 将一些基本的 ML 模型返回给用户。

目前，我使用 firebase auth 保护用户详细信息。我想在使用基本应用程序时使用 JWT 用户来验证他们对 ML 模型的请求。

对于 fastapi，似乎没有一个简单的答案来做到这一点。

我已经遵循了两个主要线程来解决如何执行此操作的方法，但是对于如何简单地从请求的标头中获取 JWT 并针对 firebase admin 或其他什么进行检查，我有点迷失了？

按照本教程并使用这个包，我最终得到了类似的东西， https://github.com/tokusumi/fastapi-cloudauth。这并没有真正做任何事情 - 它没有为我验证 JWT，有点困惑这个包是否真的值得？

from fastapi import FastAPI, HTTPException, Header,Depends
from fastapi.middleware.cors import CORSMiddleware
from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
from fastapi_cloudauth.firebase import FirebaseCurrentUser, FirebaseClaims

app = FastAPI()
security = HTTPBearer()


origins = [
    xxxx
]

app.add_middleware(
   xxxx

)

get_current_user = FirebaseCurrentUser(
    project_id=os.environ["PROJECT_ID"]
)


@app.get("/user/")
def secure_user(current_user: FirebaseClaims = Depends(get_current_user)):
    # ID token is valid and getting user …

我正在尝试存储与一个人在特定选项卡/URL 上停留多长时间相关的信息。

使用 chrome API - https://developer.chrome.com/docs/extensions/reference/tabs/#type-Tab - 我可以跟踪选项卡的活动信息和突出显示的信息来执行此操作。

我目前正在使用我的扩展程序跟踪几个不同的数据点，如下所示，并且希望能够跟踪我在特定选项卡上停留的时间（具体来说，我在该选项卡上停留的时间）以及我使用的频率正在选项卡之间移动或创建新选项卡。

export type TAB_USAGE = {
  tabId: number;
  index?: number;
  highlighted: boolean;
  url: string;
  startTime: string;
  endTime?: string;
  startFocus?: string;
  endFocus?: string;
};

const getHostname = (url: string) => {
  // use URL constructor and return hostname
  return new URL(url).hostname;
};

export function enableTabListener(
  socket: any,
  currentPages: TAB_USAGE[],
  visitedPages: Partial<TAB_USAGE>[]
) {


  chrome.tabs.onUpdated.addListener(
   
  });



  setInterval(async () => {
      console.log('sent tab data:', visitedPages);
  }, 50000);
}

我不是 100% 确定这里的最佳方法 - 我在想，检查一下旧数据是否处于活动状态，而新数据是否处于活动状态？

所以像 …